[英]Unable to add transition in d3
I want to add transition effect on vertical bar I designed in d3. 我想在d3中设计的垂直栏上添加过渡效果。 I am new to d3,i have tried adding transition() method but didn't quiet work.
我是d3的新手,我曾尝试添加transition()方法,但工作并不安静。 My code is as follows-
我的代码如下-
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]);
});
I want bar graph to appear from underneath one graph at a time. 我希望条形图一次从一个图的下方出现。 Plz help.
请帮助。
Without a live example , it is a bit hard to help you. 没有实际的例子,很难为您提供帮助。 But, having a look at your code, you should put the initial height at 0 and then set the final height after transition :
但是,请看一下代码,您应该将初始高度设置为0,然后在转换后设置最终高度:
svg.selectAll(".bar")
//all settings
.attr("height",0)
.transition()
.duration(1000)//1 second
.attr("height",function(d)( return height - y(d[measure1]);));
EDIT: 编辑:
Sorry, of course it would come from the top, you need to rotate the bars. 抱歉,当然是从顶部传来的,您需要旋转导条。 Also, you might have to re-assess the height calculation after applying the rotation
另外,您可能需要在应用旋转后重新评估高度计算
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]);));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.