d3.js試圖在相同的選擇器上調用數據方法兩次會產生奇怪的結果

我是D3新手，正在嘗試構建一個類似於矩形結構的表。我希望標題與其餘的矩形顏色不同。我已經寫了下面的代碼：d3.js試圖在相同的選擇器上調用數據方法兩次會產生奇怪的結果

table = svgContainer.selectAll('rect') 
        .data([managedObj]) 
        .enter() 
        .append('rect') 
        .attr("width", 120) 
        .attr("height", 20) 
        .attr("fill", "blue") 
        .text(function(d) { 
         return d.name; 
        }); 

       // create table body 
       table.selectAll('rect') 
        .data(managedObj.data) 
        .enter() 
        .append('rect') 
        .attr("y", function() { 
         shift += 20; 
         return shift; 
        }) 
        .attr("width", 120) 
        .attr("height", 20) 
        .attr("fill", "red") 
        .text(function(d) { 
         return d.name; 
        });

這是產生以下結果：

這幾乎是我的本意，除了它是嵌套矩形的第二組的第一個矩形內。這會導致只有第一個藍色矩形可見。我假設這與調用數據方法兩次有關。我該如何解決這個問題？

來源

2017-02-07 Oliver Bradley

沒有什麼奇怪的是在這裏。 'svgContainer'是一個矩形的輸入選擇。你**不能**將一個矩形追加到另一個矩形。 –

我想我明白了預期的結果，所以我給它一個去：

這條線：

table.selectAll('rect')

是選擇只是在這裏創建的矩形：

table = svgContainer.selectAll('rect')....append('rect')....

您不想將矩形附加到該矩形（或任何矩形），因爲這不起作用，但您確實想將它們附加到SVG本身。

所以不是table.selectAll你應該使用svgContainer.selectAll，但也有其他兩個問題：

如果你使用svgContainer.selectAll('rect')你會選擇rect您已經追加，當你需要的是一個空的選擇。請參閱answer here。
你不能把文本的矩形（見answer here），而不是你可以追加g元素，然後追加text和rect元素的。而且，爲了便於定位，您可以翻譯g元素，以便定位矩形和文本更直接。

所以，你的代碼可能是這樣的：

var data = ["test1","test2","test3","test4"]; 
 
\t 
 
var svgContainer = d3.select('body').append('svg').attr('width',900).attr('height',400); 
 

 

 
\t 
 
var header = svgContainer.selectAll('g') 
 
\t .data([data]) 
 
    .enter() 
 
    .append('g') 
 
\t .attr('transform','translate(0,0)'); 
 
\t \t \t \t \t 
 
header.append('rect') 
 
    .attr("width", 120) 
 
    .attr("height", 20) 
 
    .attr("fill", "blue"); 
 
\t 
 
header.append('text') 
 
    .attr('y',15) 
 
    .attr('x',5) 
 
    .text(function(d) { 
 
     return "header"; 
 
    }); 
 

 
    // create table body 
 
var boxes = svgContainer.selectAll('.box') 
 
    .data(data) 
 
    .enter() 
 
    .append('g') 
 
\t .attr('class','box') 
 
\t .attr('transform',function(d,i) { return 'translate(0,'+((i+1)*20)+')'; }); 
 
\t \t \t \t \t 
 
     
 
boxes.append('rect').attr("width", 120) 
 
\t .attr("height", 20) 
 
\t .attr("fill", "red"); 
 
\t \t \t \t \t \t 
 
boxes.append('text') 
 
\t .attr('y',15) 
 
\t .attr('x',5) 
 
\t .text(function(d) { 
 
     return d; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

來源

2017-02-07 06:28:39

d3.js試圖在相同的選擇器上調用數據方法兩次會產生奇怪的結果

回答

相關問題