平行座標：根據尺寸

Question

我試圖根據一個維度的值來改變筆劃顏色的值設置顏色： 狀態0 =紅色，狀態1 =格力，狀態3 =橙

我嘗試使用平行座標庫：https://syntagmatic.github.io/parallel-coordinates/

有一個例子，但它是複雜的，我不能使它的工作，有人可以告訴我如何應用這個簡單的例子在這裏？

 pcz = d3.parcoords()("#example") 
    .data(data) 
    .hideAxis([]) 
    .composite("darken") 
    .render() 
    .alpha(0.35) 
    .brushMode("1D-axes") // enable brushing 
    .interactive() // command line mode 

或者也許從那個簡單的例子呢？

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="d3.parcoords.js"></script> 
<link rel="stylesheet" type="text/css" href="d3.parcoords.css"> 
<div id="example" class="parcoords" style="width:360px;height:150px"></div> 

<script> 
var data = [ 
    [0,-0,0,0,0,3 ], 
    [1,-1,1,2,1,6 ], 
    [2,-2,4,4,0.5,2], 
    [3,-3,9,6,0.33,4], 
    [4,-4,16,8,0.25,9] 
]; 

var pc = d3.parcoords()("#example") 
    .data(data) 
    .render() 
    .createAxes(); 
</script> 
    enter code here 

Answer 1

你需要一個函數傳遞給顏色參數像初始化：

var color = function(d) { 
    if (d['displacement (cc)'] < 100) { 
     return 'black'; 
    } else if (d['displacement (cc)'] > 400) { 
     return 'red'; 
    } else { 
     return 'yellow'; 
    } 
}; 
var parcoords = d3.parcoords()("#example") 
    .color(color) 
    .alpha(0.4);