函數select（）方法

在這個項目中，我做了一個交互式的週期表，它基於一個csv文件。我創建了一個組g，並且我爲每個化學元素提供了一個id。例如：函數select（）方法

<g id="element1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://en.wikipedia.org/wiki/Hydrogen"><rect x="0" y="0" rx="4" ry="4" id="Nonmetal" class="xpos bordered" width="51" height="61" style="fill: rgb(255, 215, 0);"></rect></g>

我繪製了每個元素的卡片，但現在嘗試添加文本。在select方法中，我放置了一個函數來表示每個元素，但它不起作用。是否允許在select（）中放置一個函數？還是有另外一個這樣做？

Uncaught TypeError: Cannot read property 'AtomicNumber' of undefined

var newlist = function(csvFile){ 
     d3.csv(csvFile,function(d){ 
     return { 
      AtomicNumber: d.AtomicNumber, 
      Element:  d.Element, 
      Symbole:  d.Symbole, 
      .... 
      DisplayRow: d.DisplayRow, 
      DisplayColumn: d.DisplayColumn,}; 
     }, 

    function(error,data) { 
     var cards = svg.selectAll(".DisplayRow") 
        .data(data, function(d) { 
         return d.DisplayRow+':'+d.DisplayColumn; 
        }); 
{ 


     cards.enter() 
      .append('g') 
      .attr("id",function(d) {return "element"+(d.AtomicNumber)}) 
      .append("rect") 
      .attr("x", function(d) { return (d.DisplayColumn - 1) * (gridSize + espacecases); })       
      .attr("y", function(d) { return (d.DisplayRow - 1) * (gridSize + 10 + espacecases); }) 
      .attr("width", gridSize) 
      .attr("height", gridSize+10) 
}) ; 
} 

{ 
     d3.select("body").select(function(d) {return ("#element"+d.AtomicNumber);}) 
     .append("text") 
     .style("font-size",10) 
     .attr("x", function(d) { return (d.DisplayColumn - 1) * (gridSize + espacecases)+10; }) 
     .attr("y", function(d) { return (d.DisplayRow - 1) * (gridSize + 10 + espacecases)+10; }) 
     .style("text-anchor", "middle") 
     .text(function(d) { return (d.AtomicNumber) ; }); 
}

來源

2016-04-15 R. Yard

另一種方法可以將代碼塊包裝在'cards.each（function（d）{...}'中，然後使用'd3.select（「body」）。（（「＃element」+ d.AtomicNumber））'或類似的東西。 – JSBob

要在g的text與rect。另外，您應該定位g，然後將元素相對於g進行定位。例如：

var g = cards.enter() 
    .append('g') 
    .attr("id",function(d) {return "element"+(d.AtomicNumber)}) 
    .attr("transform", function(d){ 
    var x = (d.DisplayColumn - 1) * (gridSize + espacecases), 
     y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases); 
    return "translate(" + x + "," + y + ")"; 
    }); 

g.append("rect") 
    .attr("width", gridSize) 
    .attr("height", gridSize+10); 

g.append("text") 
.text(function(d){ 
    return (d.AtomicNumber); 
});

來源

2016-04-15 18:39:36 Mark

函數select（）方法

回答

相關問題