D3.js TreeMap - 錯誤：<rect>屬性寬度：期望的長度，「NaN」

我想在D3中創建一個樹形圖在ReactJS，下面是我的代碼，我得到這個錯誤，但不能圖爲什麼：D3.js TreeMap - 錯誤：<rect>屬性寬度：期望的長度，「NaN」

錯誤：屬性寬度：預計長度，「NaN」。

const chart = d3.select(this.node) 

    const treeMap = d3.treemap() 
     .size(this.state.width, this.state.height) 

    d3.json("treemap.json", (error, data) => { 
     if (error) throw error; 
     console.log(data) 
     const root = d3.hierarchy(data) 
      .sum((d) => { return d.size }) 

     treeMap(root); 
     console.log(root) 

     const cell = chart.selectAll("g") 
      .data(root.leaves()) 
      .enter() 
      .append("g") 

     cell.append("rect") 
      .attr("id", (d) => { return d.data.id; }) 
      .attr("width", (d) => { return d.x1 - d.x0; }) 
      .attr("height", (d) => { return d.y1 - d.y0; })

任何幫助將非常感激。謝謝！

編輯：我的JSON見下文

{ 
       "Skill": "General", "children": [ 
        { 
         "Skill": "Dev", "count": 24, "children": [ 
          { "Skill": "Java", "count": 13 }, 
          { "Skill": "Javascript", "count": 6 }, 
          { "Skill": "Analytics", "count": 5 } 
         ] 
        }, 
        { 
         "Skill": "Functional", "count": 11, "children": [ 
          { "Skill": "Business Analysis", "count": 7 }, 
          { "Skill": "PMO", "count": 1 }, 
          { "Skill": "Agile", "count": 3 } 
         ] 
        } 

       ] 
      }

來源

2017-08-02 Safeer Hayat

你在哪裏把這個代碼？ – Muhaimin

你確定'x1'和'x0'是數值，它們存在於'root.leaves（）'中的每個對象嗎？ –

@ SimonBilsky-Rollins x0是0，x1是NaN，所以我猜這是錯誤的。我以爲他們是爲了自動設置？我怎樣才能確保他們是正確的價值觀？對不起，如果它是一個愚蠢的問題，這是一個字面初學者到這 –

兩個潛在的問題：

一，未正確指定您的大小：

const treeMap = d3.treemap() 
     .size(this.state.width, this.state.height)

這應該是一個數組：.size([width,height])

而且，根據您的數據，這裏總結的是：

const root = d3.hierarchy(data) 
    .sum((d) => { return d.size })

我相信你試圖總結d.count，而不是d.size，這是未定義的（請參閱console.log語句在運行此函數時）。總之，這給：

var data = { "Skill": "General", "children": [{ 
 
    "Skill": "Dev", "count": 24, "children": [ 
 
    { "Skill": "Java", "count": 13 }, 
 
    { "Skill": "Javascript", "count": 6 }, 
 
    { "Skill": "Analytics", "count": 5 } 
 
    ] 
 
    }, 
 
    { "Skill": "Functional", "count": 11, "children": [ 
 
    { "Skill": "Business Analysis", "count": 7 }, 
 
    { "Skill": "PMO", "count": 1 }, 
 
    { "Skill": "Agile", "count": 3 } 
 
    ] 
 
} 
 
] 
 
}; 
 

 
var width = 400; var height = 200; 
 

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

 
const treeMap = d3.treemap() 
 
    .size([width, height]) 
 

 
const root = d3.hierarchy(data) 
 
    .sum((d) => { console.log(d); return d.count }) 
 

 
treeMap(root); 
 

 

 
const cell = chart.selectAll("g") 
 
    .data(root.leaves()) 
 
    .enter() 
 
    .append("g") 
 
    
 
color = d3.schemeCategory20; 
 

 
cell.append("rect") 
 
    .attr("id", (d) => { return d.data.id; }) 
 
    .attr("fill", (d,i) => { return color[i%20]; }) 
 
    .attr("width", (d) => { return d.x1 - d.x0; }) 
 
    .attr("height", (d) => { return d.y1 - d.y0; })

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

來源

2017-08-02 21:29:26

啊，這就是它，非常感謝你，討厭我錯過了那些小東西 –

D3.js TreeMap - 錯誤：<rect>屬性寬度：期望的長度，「NaN」

回答

相關問題