0

我是一名 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>
4

1 回答 1

0

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

于 2013-06-19T01:40:48.830 回答