Question

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

Answer 1

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

一个数据集，两组......

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

d3js图表和图表：多选列表

1 个答案: