将 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 输入元素中选择的值。我确实尝试过，我在下面评论了。我该怎么做才能获得评级和 value.Thank 你的输入元素值。

Answer 1

您的问题缺少最重要的部分之一：输入的 HTML。所以，我假设您使用的是简单的数字输入，如下所示：

<input type="number">

要使用 D3 获取此输入中输入的数字的值，select 通过标签、ID 或 class 的输入，并使用 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;

将 html 输入值添加到 d3js

Add html input value to the d3js

html

javascript

data-visualization

d3.js