Question

我有一个有8个小节的条形图。现在我想创建一个包含10个条形图的条形图。转换工作正常，但我的新条形图也只有8个条形图。我的HTML：

<html>
<head>
    <title>TransitionTest</title>
    <script src="d3.v2.js"></script>
</head>
<body>
    <script src="TransitionTest.js"></script>
    <button onclick="transitioning()">
        Transition
    </button>

</body>
</html>

我的剧本：

var data = [0,1,2,3,4,5,6,7];

var height = 500;
var width = 1000;
var svg = d3.select("body")
        .append("svg")
        .attr("class", "svg")
        .attr("width", width)
        .attr("height", height)

var xScale = d3.scale.linear()
            .domain([0,10])
            .range([0,width]);

var yScale = d3.scale.linear()
            .domain([0,9])
            .range([height,0])

var bar = svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function (d,i) {
            return xScale(i);
        })
        .attr("y", function (d) {
            return yScale(d);
        })
        .attr("width", function (d,i) {
            return (99);
        })
        .attr("height", function (d) {
            return (height-yScale(d));
        })
        .attr("fill", "grey");

function transitioning() {
data = [8,6,4,2,0,9,7,5,3,1];
bar.data(data)
    .transition()
    .attr("x", function (d,i) {
        return xScale(i/2);
    })
    .attr ("y", function (d) {
        return yScale(d);
    })
    .attr("width", function (d,i) {
        return (49);
    })
    .attr("height", function (d) {
        return (height-yScale(d));
    });
}

我做错了什么？

Answer 1

您需要使用enter()选项添加新栏，类似于您首先添加栏的方式。因此，在您的函数transitioning()中，您需要再次调用

bar.data(data).enter().append("rect")...

您可以先将高度（和/或宽度）设置为0，然后调用transition()并将它们设置为实际值，从而“显示”条形图。有关不同选择/连接的更多详细信息，请参阅this tutorial。

Answer 2

现在我将转换功能更改为：

function transitioning() {
if (i==1){
    data = [0,1,2,3,4,5,6,7];
    i=0;
}
else if (i==0){
    data = [8,6,4,2,0,9,7,5,3,1];
    i++;
}

bar.data(data).enter().append("rect")
.attr("class", "bar")
.attr("x", function(d,i) {
    return xScale(i);
})
.attr("y", height)
.attr("height", 0)
.attr("width", 99)
.attr("fill", "grey")
.transition()
.attr("height", function(d) {
    return (height-yScale(d));
})
.attr("width", 99)
.attr("y", function(d) {
    return yScale(d);
});

bar.transition()
.attr("x", function(d,i) {
    return xScale(i);
})
.attr("y", function(d) {
    return yScale(d);
})
.attr("height", function(d) {
    return (height-yScale(d));
})
.attr("width", 99)
.attr("fill", "grey");

bar.exit().transition()
.attr("y", height)
.attr("height", 0)
.remove();
}

除exit（）函数外，它的工作原理。我每次点击都会更改我的条形图，但是较长数据中的最后2个条形图不会消失。当我使用firebug时，我可以看到，每当我切换到较长的数据阵列时，就会生成2个新的条形元素。如何删除它们？

d3可变长度的过渡条形图

2 个答案: