Question

我是D3初学者（带有沙哑的训练轮）寻求Clipping的一些帮助。我希望看到我的图形两端的条形图整齐地转换进去，就像Mike Bostock的“条形图，第2部分”（从中我抓住了他的一些代码并将它与我自己的代码结合起来）。我最困惑的是在评论中。对于代码板的道歉，我不确定问题的根源是什么。非常感谢。

<!DOCTYPE html>
<html>
    <head>
    <title>Animated bar chart</title>
         <meta charset="UTF-8" />
    </head>

    <style>
    body {
        font-family: Verdana, sans-serif;
        font-size: 8pt;
        line-height: 12pt;
        background: #ffffff;
        color: #555555;
    }

    .axis path, .axis line {
        fill: none;
        stroke: #555555;
        shape-rendering: crispEdges;
    }

    .line {
        fill: none;
        stroke: orange;
        stroke-width: 1px;
    }

    .bar {
    fill: orange;
        shape-rendering: crispEdges;
    }

    .x.axis.path {
        display: none;
    }
    </style>

    <body>
    <h4>Animated bar chart</h4> 
    <script type="text/javascript" src="d3.v3.min.js"></script>

    <script>

    var t = -1;
    var v = 0;
    var data = d3.range(20).map(next); 

    function next () {
        return {
            time: ++t,
            value: v = Math.floor(Math.random()*20)
        };
    }

    setInterval(function () {
        data.shift();
        data.push(next());
        redraw();
    }, 1500);   

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

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

    var barWidth = (width / 20) - 5;

    var y = d3.scale.linear()
        .domain([0, 20])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
           .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    /* This definitiion by itself causes the first bar of chart to not appear
    var defs = svg.append("defs");
    defs.append("svg:clipPath") 
        .attr("id", "clip1");       

    This removes all the bars.  Not sure where this should go?
    var clip = svg.append("g")
        .attr("clip-path", "url(#clip1)")
        .append("svg:rect")
        .attr("width", width)
        .attr("height", height);
    */

    svg.selectAll("rect")
        .data(data)
        .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.time); })
            .attr("width", barWidth) 
            .attr("y", function(d) { return y(d.value); })
            .attr("height", function(d) { return (height - y(d.value)); }); 

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);       

    function redraw()
    {
    var rect = svg.selectAll("rect")
            .data(data, function(d) { return d.time; });

        // initialise entering bars and then do the transition
        rect.enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d, i) { return x(i + 1); })
            .attr("y", function(d) { return y(d.value); })
            .attr("width", barWidth)
            .attr("height", function(d) { return (height - y(d.value)); })
            .transition()
            .duration(1000)
            .attr("x", function(d, i) { return x(i); });

        // transition entering and updating bars
        rect.transition()
            .duration(1000)
            .attr("x", function(d, i) { return x(i); });

        // transition exiting bars
        rect.exit()
            .transition()
            .duration(1000)
            .attr("x", function(d, i) { return x(i - 1); })
            .remove();
    }
    </script>

</body>
</html>

Answer 1

工作示例位于： http://www.animatedcreations.net/d3/animatedBarChart_Slide.html。该条形图从右侧向左侧过渡。 x轴通过父转换与条形同步更新。通过为条和x轴添加额外的SVG来实现剪切。

D3条形图过渡混乱

1 个答案: