Добавить входное значение html в d3js

Question

Я пытаюсь передать входные значения html в сценарий d3js, чтобы сделать его более динамичной визуализацией. Ниже приведен сценарий:

var svg = d3.select("svg"), 
 
     width = +svg.attr("width"); 
 

 
    var format = d3.format(",d"); 
 

 
    var color = d3.scaleOrdinal(d3.schemeCategory10); 
 

 
    var pack = d3.pack() 
 
     .size([width, width]) 
 
     .padding(1.5); 
 

 
    //  function add() { 
 
    //  rat = document.getElementsByName("ratings").value; 
 
    //  chk = document.getElementsByName("checkins").value; 
 
    // 
 
    // var sum = parseInt(rat) + parseInt(chk); 
 
    // alert(sum); 
 
    // } 
 

 
    console.log(d3.select("body")); 
 

 
    d3.csv("austin_fsq.csv", function(d,ra,ch) { 
 
    d.sno = +d.sno; 
 
    if (d.sno && d.rating >= 9 && d.value <= 500) return d; 
 
// if (d.sno && d.rating >= "+ra+" && d.value <= "+ch+") return d; 
 
    }, function(error, classes) { 
 
    if (error) throw error; 
 

 
    var root = d3.hierarchy({children: classes}) 
 
     .sum(function(d) { return d.value; }) 
 
     .each(function(d) { 
 
      if (id = d.data.id) { 
 
      var id, i = id.lastIndexOf("."); 
 
      d.id = id; 
 
      d.package = id.slice(0, i); 
 
      d.class = id.slice(i + 1); 
 
      } 
 
     }); 
 

 
    var node = svg.selectAll(".node") 
 
     .data(pack(root).leaves()) 
 
     .enter().append("g") 
 
     .attr("class", "node") 
 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 

 
    node.append("circle") 
 
     .attr("id", function(d) { return d.id; }) 
 
     .attr("r", function(d) { return d.r; }) 
 
     .style("fill", function(d) { return color(d.package); }); 
 

 
    node.append("clipPath") 
 
     .attr("id", function(d) { return "clip-" + d.id; }) 
 
     .append("use") 
 
     .attr("xlink:href", function(d) { return "#" + d.id; }); 
 

 
    node.append("text") 
 
     .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; }) 
 
     .selectAll("tspan") 
 
     .data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); }) 
 
     .enter().append("tspan") 
 
     .attr("x", 0) 
 
     .attr("y", function(d, i, nodes) { return 13 + (i - nodes.length/2 - 0.5) * 10; }) 
 
     .text(function(d) { return d; }); 
 

 
    node.append("title") 
 
    .text(function(d) { return d.data.id + "\n" + format(d.value); }); 
 
    });

Так что если вы видите здесь:

 if (d.sno && d.rating >= 9 && d.value <= 500) return d; 

Я закодированы значения, которые я хочу, чтобы выбрать один из HTML элемента ввода. Я попробовал, что я прокомментировал ниже. Что я могу сделать, чтобы получить эти значения входных элементов для оценки и значения. Спасибо.

Answer 1

В вашем вопросе отсутствует одна из наиболее важных частей: HTML-код ввода. Таким образом, я полагаю, вы используете простой ввод числа, например:

<input type="number"> 

Чтобы получить значение числа, введенное в этом входе с D3, выберите вход с помощью тегов, ID или класса, и использовать this.value, чтобы получить его значение:

d3.select("#myInput").on("change", function(){ 
 
    console.log("The value is: " + this.value); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<input id="myInput" type="number">

Однако, у вас есть дополнительная проблема:

Если вы просто установите значение переменной, например:

var myInput; 
d3.select("#myInput").on("change", function(){ 
    myInput = this.value 
}) 

Вы не использовать эту переменную внутри d3.csv строки (также называется аксессора) функции, потому что, когда браузер достигает d3.csv, функция строки она будет независимо от того, у вас есть входное значение или нет, а во втором случае переменная будет undefined.

Это, как говорится, решение вызывает функцию d3.csvпосле вход введен. Заверните его в другую функцию и вызвать эту функцию после того, как вы получите вход:

var myInput: 
d3.select("#myInput").on("change", function(){ 
    myInput = this.value; 
    //call your chart function here 
}) 

Затем вы можете использовать входное значение:

if (d.sno && d.rating >= myInput && d.value <= 500) return d;