Question

我试图在d3js中使用动态输入到绘图函数。因此，当用户更改csv时，它将删除当前选择并绘制新输入的可视化。所以我的问题是我将使用带有select的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（）的回调函数中，你编写了调用某种绘制函数的代码。但是不必在那里定义绘制函数。你可以在外面写这个函数，然后在那里调用它。这大大增加了代码的可读性。 ;）

在d3js中使用动态输入（CSV）

1 个答案: