D3條形圖轉換混淆

我是一名D3初學者（有刮擦訓練輪）尋求一些幫助剪切。我希望看到圖形兩端的酒吧整齊地過渡，如Mike Bostock的「A條形圖，第2部分」（我從中抽取了他的一些代碼並將其與我自己的代碼結合在一起）。我最困惑的東西是在評論中。代碼板的道歉，我不知道問題的根源是什麼。非常感謝。D3條形圖轉換混淆

<!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>

來源

2013-06-13 user2477109

不確定你要在這裏做什麼。該代碼導致第一個條不會出現，因爲隨後的語句「selectAll（」rect「）.data（data）」與您剛剛添加到數據中的'rect'元素匹配。 –

謝謝拉爾斯。這很有幫助。我通過將座標軸放置在一個svgcontainer中，並將圖表放置在單獨的小型svg容器中來解決剪切問題。不過，我仍然不明白剪輯應該如何工作。 – user2477109

你想達到什麼目的？ –