javascript - 将 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)值。谢谢。

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 ，无论您是否有输入值，它都会运行的行函数，并且在第二种情况下该变量将为未定义。

话虽这么说，解决方案是在输入内容之后调用 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;