d3中的重疊

我已經使用d3創建了甘特圖。根據數據，我的圖表包含不同大小的矩形。圖中還有重疊的矩形。我想要添加一個功能，以便當矩形重疊時，高度較小的矩形應放在高度較大的矩形的頂部。我不知道該怎麼做。如果有人能幫助我，那將會很棒。d3中的重疊

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <title></title> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
    <style type="text/css"> 
    .axis path, 
    .axis line { 
     fill: none; 
     stroke: black; 
     shape-rendering: crispEdges; 
    } 

    .axis text { 
     font-family: sans-serif; 
     font-size: 11px; 
    } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 

    var w = 500; 
    var h = 300; 
    var padding = 30; 
    var rectH = 50; 
    var rectW = 100; 
    var dataset = [ 
        [5, 20, 20, 10, "red"], [480, 90, 20, 10, "red"], [475, 90, 30, 10, "green"], [100, 33, 20, 10, "red"], [330, 95, 20, 10, "red"], 
        [410, 12, 20, 10, "red"], [475, 44, 20, 10, "red"], [25, 67, 20, 10, "red"], [80, 21, 10, 20, "red"], [85, 21, 20, 10, "blue"], 
        [600, 150, 20, 10, "red"] 
    ]; 

    var xScale = d3.scale.linear() 
         .domain([0, d3.max(dataset, function (d) { return d[0]; })]) 
         .range([padding, w - padding * 2]); 

    var yScale = d3.scale.linear() 
         .domain([0, d3.max(dataset, function (d) { return d[1]; })]) 
         .range([h - padding, padding]); 

    var rScale = d3.scale.linear() 
         .domain([0, d3.max(dataset, function (d) { return d[1]; })]) 
         .range([2, 5]); 

    var xAxis = d3.svg.axis() 
         .scale(xScale) 
         .orient("bottom") 
         .ticks(5); 

    var yAxis = d3.svg.axis() 
         .scale(yScale) 
         .orient("left") 
         .ticks(5); 

    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    var g = svg.append("g"); 

    g.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", function (d) { 
      return xScale(d[0]); 
     }) 
     .attr("y", function (d) { 
      return yScale(d[1]); 
     }) 
    .attr("height", function (d) { return d[2]; }) 
    .attr("width", function (d) { return d[3]; }) 
    .attr("fill", function (d) { return d[4]; }); 

    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0," + (h - padding) + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(" + padding + ",0)") 
     .call(yAxis); 

    </script> 
</body> 
</html>

我想，當這兩個矩形重疊然後用較小高度的矩形應該在另一個的頂部。所以我想要紅色的矩形應該在藍色的頂部，而對於另一個重疊我想要紅色的矩形在綠色的頂部。

感謝

來源

2014-06-16 user3745870

如果沒有至少一些*代碼甚至是小提琴，D3問題幾乎不可能解決。你將不得不張貼更多的信息來獲得更好的幫助 –

嗨@JimBeam我已經提供了小提琴現在。謝謝 – user3745870

除了小提琴之外，您還可以在問題中包含代碼嗎？ –

我能想到的兩種解決方案：

1）最簡單的解決方案（沒有你要的）是使rects透亮;那麼底層的rects就會顯示出來。在CSS中，添加以下內容

rect { opacity: .5;}

2）基本上，DOM中rects的順序決定哪些rects位於頂部。後面的rects顯示在早期的rects上。因此，爲了讓小型曲目位於最上方，您需要對數據進行排序，以便在系列結束時具有較短的曲度。在您的腳本中，在聲明數據集之後立即添加以下內容。

dataset.sort(function(a, b) { return b[2]-a[2]})

Here's有兩個選項一起小提琴。

來源

2014-06-21 03:21:50

回答

相關問題