Question

我正在尝试将html输入值传递给d3js脚本，以使其更具动态可视化。以下是剧本：

＆＃13;

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); });
  });

＆＃13;

所以，如果你在这里看到：

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

我已经编码了我想从html输入元素中选择的值。我确实尝试了下面评论过的内容。我该怎么做才能获得评级和价值的输入元素值。谢谢。

Answer 1

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

this.value

要获取使用D3在此输入中输入的数字的值，请按标签，ID或类选择输入，并使用d3.select("#myInput").on("change", function(){ console.log("The value is: " + this.value); })获取其值：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，您还有一个问题：

如果您只是将值设置为变量，请执行以下操作：

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;

然后，您可以使用输入值：

if(((n1,n2,n3,n4,n5)%2)==0)

将html输入值添加到d3js

1 个答案: