d3.js - d3js 图表和图形：多选列表

Question

是否可以创建不同 d3js 图形类型的选择列表，一旦用户选择一个选项，图形就会出现在页面的所有空间中，当他选择另一种类型时，该区域将分为两个空间，显示两个图形相同的数据等...

Answer 1

对于您问题的 d3js 部分，可能需要提及的是，在 D3 中，数据可以绑定到不同的 DOM 元素，而这些 DOM 元素之间没有直接依赖关系。在以下示例中，我们有一个数据集，其中六个值中的每一个都绑定到蓝色和红色圆圈。

http://jsfiddle.net/DorjeDuck/sxfdq/3/

一组数据，两组...

var radius = 21,
w = 400,
h = 200;

var body = d3.select("body");
body.append("button")
.text("go")
.on("click", function () {
    newCircles.start();
})

body.append("br");
body.append("br");

var svg = body
.append("svg")
.attr("class", "svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");

var newCircles = function () {

var data = [];
var counter = 0;
var interval;

var nc = function () {

    data.push(counter);

    svg.selectAll(".group1")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "group1")
        .attr("cx", 30)
        .attr("cy", function (d) {
            return d * 30;
        })
        .attr("r", 10)
        .attr("fill", "blue");

    svg.selectAll(".group2")
        .data(data)
        .enter()

        .append("circle")
        .attr("class", "group2")
        .attr("cx", 30)
        .attr("cy", function (d) {
            return d * 30;
        })
        .attr("r", 10)
        .attr("fill", "red")
        .transition()
        .delay(100)
        .duration(300)
        .attr("cx", 100)


    if (++counter > 5) {
        clearInterval(interval);

        svg.selectAll(".group1")
            .data(data)
            .transition()
            .delay(200)
            .duration(1000)
            .attr("cx", "300");
    }
}

nc.start = function () {
    svg.selectAll("circle").remove();
    data = [];
    counter = 0;
    clearInterval(interval);
    interval = setInterval(newCircles, 500);
}

return nc;
}();