2

我有一个有 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));
    });
}

我在做什么错？

4

2 回答 2

0

您需要使用enter()选择添加新条，类似于您首先添加条的方式。因此，在您的函数中transitioning()，您需要进行另一个调用，例如

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

您可以通过首先将高度（和/或宽度）设置为 0 来使条“出现”，然后调用transition()并将它们设置为实际值。有关不同选择/连接的更多详细信息，请参阅本教程。

于 2012-11-09T11:45:21.817 回答
0

现在我将我的转换函数更改为：

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 个新的条形元素。我怎样才能让它们被删除？

于 2012-11-14T11:03:15.223 回答