html - 在 d3js 中使用动态输入(CSV)

Question

我正在尝试对 d3js 中的绘制函数使用动态输入。因此，当用户更改 csv 时，它将删除当前选择并为新输入绘制可视化效果。所以我的问题是我会在选择中使用 onChange 函数，然后在这个函数中解析 csv 并调用 draw 函数。当前的工作代码在 plunker 中:

https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview

    <svg width="1250" height="1080"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        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);

        var inputs = {};

      function  selectCity(){


            //storing the drop-dsown selection in the ddSelection var
            var ddSelection = document.getElementById("city").value;

            //feeding that to create the csv filename you want

            var str1 = ddSelection;
            var str2 = ".csv";
             var csvFile = str1.concat(str2);


            str1.concat(str2);
            console.log(csvFile);


        d3.csv(csvFile, function(d) {
            d.sno = +d.sno;
            return d;
        }, function(error, data) {
            if (error) throw error;

            d3.selectAll("input").on("change", function(){
              inputs[this.id] = +this.value;
              console.log(inputs.myValue + "-" + inputs.myRating)
              if(inputs.myValue && inputs.myRating){
                 var classes = data.filter(d => d.value < inputs.myValue && d.rating >= inputs.myRating);
                draw(classes);
              }
            })

            function draw(classes) {
                console.log(classes.length);
                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);
                    });
            }
        });
      }
    </script>
</div>

Answer 1

这是一个如何做到这一点的例子:http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

您不必重绘所有内容，只需更新某些元素即可。

我不明白您关于更改 CSV 的部分。用户不会更改 CSV，但您的视觉输出取决于某些用户数据。所以是的，在 d3.csv() 的回调函数中，您编写了调用某种绘制函数的代码。但是 draw 函数不必在那里定义。您可以在外部编写函数并在那里调用它。这极大地提高了代码的可读性。 ;)