Question

我希望在我的折线图中获得一个过渡动画，但我不确定.transition（）会去哪里。我试着将它放在我认为应该去的地方，但这只是冻结了图表。这是我的代码：

            var vis = d3.select('#visual'),
                WIDTH = 1000,
                HEIGHT = 500,
                MARGINS = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 50
                },
                xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
                    return d.x;
                }), d3.max(lineData, function(d) {
                    return d.x;
                })]),
                yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
                    return d.y - 1;
                }), d3.max(lineData, function(d) {
                    return d.y;
                })]),

                //setup x
                xAxis = d3.svg.axis()
                .scale(xRange)
                .tickSize(5)
                .tickSubdivide(true),

                //setup y
                yAxis = d3.svg.axis()
                .scale(yRange)
                .tickSize(5)
                .orient("left")
                .tickSubdivide(true);


            vis.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);

            vis.append("svg:g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);



            var lineFunc = d3.svg.line()
                .x(function(d) {
                    return xRange(d.x);
                })
                .y(function(d) {
                    return yRange(d.y);
                });

            vis.append("svg:path")
                .attr("class", "myLine")
                .attr("d", lineFunc(lineData))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none");
 //           lineFunc.transition();           <--Where I thought the tag should be
 //           lineFunc.exit().transition()

 //           .remove();

如果有必要，这就是全部内容：https://jsfiddle.net/hppkqfy7/

Answer 1

D3中的转换通常适用于属性，并且在设置属性的新值之前应调用.transition()。这将告诉D3在新旧之间进行插值。

在您的情况下，您只需在设置更新的.transition()属性之前致电d：

d3.select(".myLine")
  .transition()
  .attr("d", lineFunc(lineData));

完整演示here。

d3中行的.transition的位置？

1 个答案: