Javascript d3过渡堆积条形图_Javascript_D3.js

Javascript d3过渡堆积条形图

javascript d3.js

Javascript d3过渡堆积条形图,javascript,d3.js,Javascript,D3.js,您好，我目前在d3，js中有一个堆叠条形图，目前不会转换。图表可以更新，但遗憾的是没有转换：( 我觉得这是一个1行修复。请帮忙！！！把这个从简单堆栈 svg{ 边框：实心1px#ccc；字体：10px无衬线；形状渲染：边缘清晰； } var w=960， h=500 //创建画布 var svg=d3.选择（#viz”）.追加（“svg:svg”） .attr（“类别”、“图表”） .attr（“宽度”，w） .attr（“高度”，h） .append（“svg:g”） .att

您好，我目前在d3，js中有一个堆叠条形图，目前不会转换。图表可以更新，但遗憾的是没有转换：( 我觉得这是一个1行修复。请帮忙！！！把这个从


简单堆栈
svg{
边框：实心1px#ccc；
字体：10px无衬线；
形状渲染：边缘清晰；
}
var w=960，
h=500
//创建画布
var svg=d3.选择（#viz”）.追加（“svg:svg”）
.attr（“类别”、“图表”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“翻译（10470）”）；
x=d3.scale.ordinal（）.rangeRoundBands（[0，w-800]）
y=d3.刻度.线性（）.范围（[0，h-100]）
z=d3.scale.ordinal（）范围（[“蓝色”，“浅蓝色]）
//log（“原始矩阵----------------------”；
//3列：ID、c1、c2
var矩阵=[
[ 1,  5871, 8916]
];
//控制台日志（矩阵）
var matrix2=[
[ 1,  21, 800]
];
函数rand_it（x）{
返回Math.floor（（Math.random（）*x）+1）；
}
函数渲染（矩阵）{
var t=d3.transition（）
.期限（300）；
//除去
svg.selectAll（“g.valgroup”）
.remove（）；
svg.selectAll（“rect”）
.过渡（t）
.remove（）；
变量重新映射=[“c1”，“c2”]映射（函数（dat，i）{
返回矩阵图（函数（d，ii）{
返回{x:ii，y:d[i+1]}；
})
});
console.log（“新的！！！\n”，矩阵[0]）；
//console.log（“布局------------------------------------------”；
var stacked=d3.layout.stack（）（重新映射）
x、 域（堆叠[0]。映射（函数（d）{return d.x；}））；
y、 域（[0，d3.max（stacked[stacked.length-1]，函数（d）{returnd.y0+d.y；}]）；
//为每列添加一个组。
var valgroup=svg.selectAll（“g.valgroup”）
.数据（堆叠）
.enter（）.append（“svg:g”）
.classed（“valgroup”，真）
.style（“fill”，函数（d，i）{返回z（i）；}）
.style（“stroke”，函数（d，i）{返回d3.rgb（z（i））.darker（）；}）；
//为每个日期添加一个rect。
var rect=valgroup.selectAll（“rect”）
.data（函数（d）{return d；}）
.enter（）.append（“svg:rect”）
.过渡（t）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{return-y（d.y0）-y（d.y）；}）
.attr（“高度”，函数（d）{返回y（d.y）；}）
.attr（“宽度”，x.rangeBand（））；
//纵队
rect.selectAll（“rect”）
.transition（）//这是为了创建动画
.持续时间（500）//500毫秒
.轻松（“反弹”）
.延迟（500）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{return-y（d.y0）-y（d.y）；}）
.attr（“高度”，函数（d）{返回y（d.y）；}）
.attr（“宽度”，x.rangeBand（））；
};
渲染（矩阵）；
setInterval（function（）{render（[[1，rand_it（10），rand_it（50）]）；console.log（“2”）；}，5000）；

您没有正确使用

转换（）

。转换从以前的值更改为最终值。因此，在此代码中：

var something = svg.append("something").attr("x", 10);
something.transition().duration(500).attr("x", 20);

某物的

属性将在500毫秒内从10变为20

但当你这样做时，就像你那样：

var rect = valgroup.selectAll("rect")
            .data(function(d){return d;})
            .enter().append("svg:rect")
            .transition(t)
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return -y(d.y0) - y(d.y); })
            .attr("height", function(d) { return y(d.y); })
            .attr("width", x.rangeBand());

前面的值在哪里？这是一个“输入”选项。为了使事情更复杂，您执行了以下操作：

svg.selectAll("rect")
           .transition(t)               
           .remove();

在函数的开头，没有矩形可以进行任何转换

我对您的代码做了一些更改，删除了

remove（）

，并创建了一些“更新”选项：

请记住，这不是一个优化的代码，更不是一个漂亮的代码：我只做了最小的更改，使转换工作，您必须在这里做很多改进。

您没有使用

转换（）

正确。从上一个值转换为最终值。因此，在此代码中：

var something = svg.append("something").attr("x", 10);
something.transition().duration(500).attr("x", 20);

某物的