Javascript 无法在d3中添加转换
我想在d3中设计的竖条上添加过渡效果。我是d3新手,我尝试过添加transition()方法,但没有成功。我的代码如下-Javascript 无法在d3中添加转换,javascript,css,d3.js,Javascript,Css,D3.js,我想在d3中设计的竖条上添加过渡效果。我是d3新手,我尝试过添加transition()方法,但没有成功。我的代码如下- svg.selectAll(".bar") .data(data) .enter().append("g") .attr("class", "bar") .append("rect") .attr("rx", barRadius) .
svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.append("rect")
.attr("rx", barRadius)
.attr("fill", function(d,i) {
var drilledvalue;
try {
drilledvalue = JSON.parse(parent.$("#drills").val())[colIds[0]];
} catch (e) {
}
if (typeof drilledvalue !== 'undefined' && drilledvalue.length > 0 && drilledvalue.indexOf(d[columns[0]]) !== -1) {
return drillShade;
}
if(typeof chartData[div]["transpose"] === "undefined" || chartData[div]["transpose"]=='N')
{
return getDrawColor(div, parseInt(i));//"url(#gradientBar_" + (d[columns[0]]).replace(/[^a-zA-Z0-9]/g, '', 'gi') + ")";
}
else
{
return color(0);
}
})
// .attr("color_value", "steelblue")
.attr("index_value", function(d, i) {
return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
})
.attr("class", function(d, i) {
return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
})
.attr("id", function(d) {
return d[columns[0]] + ":" + d[measure1];
})
.attr("onclick", fun)
.attr("x", function(d) {
return x(d[columns[0]]);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d[measure1]);
})
.attr("height", function(d) {
return height - y(d[measure1]);
});
我希望条形图一次从下方显示一个图形。请帮忙 没有一个活生生的例子,帮助你有点困难。但是,在查看代码时,应将初始高度设置为0,然后在转换后设置最终高度:
svg.selectAll(".bar")
//all settings
.attr("height",0)
.transition()
.duration(1000)//1 second
.attr("height",function(d)( return height - y(d[measure1]);));
编辑:
对不起,它当然是从顶部来的,你需要旋转这些条。此外,在应用旋转后,可能必须重新评估高度计算
svg.selectAll(".bar")
//all settings
.attr("height",0)
.attr("transform", "rotate(180,x,y)"); //note y must be the bottom of the chart
.transition()
.duration(1000)//1 second
.attr("height",function(d)( return height - y(d[measure1]);));
非常感谢@Yoann,你的代码工作了……差不多!条形图是从上到下而不是从下到上显示的,这可能是因为我在svg中设置了视图框属性。你能提出一些解决办法吗。。。。