Question

我正在学习D3.js，看起来很容易，好到目前为止，直到这种转变出现。

我想让矩形条为它们的宽度设置动画，但它们所做的只是颜色在变化。

我不太明白我做错了什么。

这是我的 JavaScript

var dataArray = [20, 30, 40, 60];
dataArray2 = [20, 40, 60];
dataPosition = [0, 300, 600];
width = 500;
height = 500;

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

var axis = d3.svg.axis()
    .ticks(5)
    .scale(widthScale);

var colorScale = d3.scale.linear()
    .domain([0, 60])
    .range(["hsl(" + Math.random() * 360 + ",100%,50%)", "hsl(" + Math.random() * 360 + ",100%,50%)"]);

var canvas = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(20,0)");


var bars = canvas.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
    .transition()
    .duration(1500)
    .attr("width", function (d) {
    return widthScale(d);
})
    .attr("height", 50)
    .attr("fill", function (d) {
    return colorScale(d);
})
    .attr("y", function (d, i) {
    return i * 100;
})


canvas.append("g")
    .call(axis)
    .attr("transform", "translate(0,400)");

My fiddle

沿途的矩形是否也可以迭代数字？

Answer 1

首先要将值设置为零，然后将转换代码添加到延迟时间，然后最后设置实际值

http://jsfiddle.net/M8TXZ/1/

var bars = canvas.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
   .transition()
   .duration(1500)
   .attr("height", 50)
   .attr("fill", function(d) {
      return colorScale(d);
   })
   .attr("y", function(d, i) {
      return i * 100;
   })
   //Sets the width to zero
   .attr("width", function(d) {
      return 0;
   })
   .transition()
   .duration(1000)
   //Sets the width to the actual value
   .attr("width", function(d) {
      return widthScale(d);
   })

D3.js过渡问题

1 个答案: