d3.js：路徑在蜱間相交軸

我正在創建一個平行座標圖，如Mikes示例here中所示。d3.js：路徑在蜱間相交軸

看來，我用於分類（字符串）數據的bandScale偏移了刻度之間的空間的1/2。路徑不與代表它們所屬類別的刻度相交，它們之間相交。我做錯了什麼可能會導致這種情況？

下面是負責繪製尺寸的方法。注意：this.dimensions是一個持有維度名稱的對象，以及相應的比例。

plotPathGroup(className: string, data) { 
 
    return this.svg.append("g") 
 
     .attr("class", className) 
 
     .selectAll("path") 
 
     .data(data) 
 
     .enter().append("path") 
 
     .attr("d", this.path.bind(this)); 
 
    }, 
 

 
    path(d) { 
 
    const scaleMap = this.keys.map(key => [ 
 
     this.x(key), 
 
     this.dimensions[key](d[key]) 
 
    ]); 
 
    return d3.line()(scaleMap); 
 
    }, 
 

 
    catDimensionScale(data, key) { 
 
    return d3.scaleBand() 
 
     .domain(data.map(d => d[key])) 
 
     .range([this.size.h, 0]); 
 
    },

來源

2017-04-10 Alec

有什麼問題嗎？ – Alexan

@亞歷克斯對不起，我沒有明確說明問題。正如您在圖表中看到的（請參閱：Intersect Issue; eyeColor，性別軸）。路徑不與代表它們所屬類別的刻度相交，它們之間相交。我做錯了什麼可能會導致這種情況？ – Alec

一個帶比例是不是這個正確的工具。問題在於，正如它的名字所暗示的那樣，一個頻段有一個帶寬。

您應該使用點標度代替。正如API所述，

點標尺是帶寬固定爲零的帶標尺的變體。

所以，你的代碼應該是：

catDimensionScale(data, key) { 
    return d3.scalePoint() 
     .domain(data.map(d => d[key])) 
     .range([this.size.h, 0]); 
}

來源

2017-04-10 23:08:15

很簡單，非常感謝Gerardo！ – Alec

d3.js：路徑在蜱間相交軸

回答

相關問題