如何繪製DC.js系列圖表中不同線條的不同線條圖案？

這是我所生成的圖表的圖象：Current Series Chart 如何繪製DC.js系列圖表中不同線條的不同線條圖案？

我已經應用了dashStyle功能到已經施加相同的圖案於所有行的線型圖對象。我需要繪製一系列圖表，每條線具有不同的圖案（虛線，虛線，平面線等）。圖表函數中的「c」對象中有很多屬性。我不確定哪個屬性對應於數據值。「c」對象的數據屬性類似於「_dc/dc.baseMixin/_chart.data（）」我是javascript和dc js的新手，並不完全理解底層的內容。

有沒有方法可以爲折線圖中的不同線條繪製不同的圖案？

這裏是我當前的代碼，其指的是這個例子後實現的：http://dc-js.github.io/dc.js/examples/range-series.html

focusChart 
.width(920) 
.height(380) 
.chart(function(c) { console.log(c);return dc.lineChart(c).dashStyle([2,3]).interpolate('cardinal').evadeDomainFilter(true); }) 
.x(d3.scale.linear().domain([1995,2017])) 
.brushOn(false) 

.yAxisLabel("Topic Weight") 
.xAxisLabel("Year") 
.elasticY(true) 
.dimension(series1Dimension) 
.group(series1Group) 
.colorAccessor(function(d){ 
    return d.key.split(",")[0].slice(5); 
}) 
.colors(TopicColorScale) 
focusChart.seriesAccessor(function(d) {return " " + d.key[0];}) 
.keyAccessor(function(d) {return +d.key[1];}) 
.valueAccessor(function(d) {return +d.value;}) 

.legend(dc.legend().x(400).itemHeight(13).gap(1).horizontal(10).legendWidth(540).itemWidth(210)); 


focusChart.yAxis().tickFormat(function(d) {return d3.format('d')(d);}); 


focusChart.xAxis().tickFormat(function(d) {return d3.format('d')(d);}); 


focusChart.margins().left += 20;

任何幫助，將不勝感激！

來源

2017-07-27 Yash Nigam

線

.chart(function(c) { console.log(c);return dc.lineChart(c).dashStyle([2,3]).interpolate('cardinal').evadeDomainFilter(true); })

提供產生subcharts的功能。的參數給此函數appear to be undocumented，但quick look at the source reveals

var subChart = _charts[sub.key] || _chartFunction.call(_chart, _chart, chartGroup, sub.key, i);

該函數採用以下參數：

複合圖表
其中複合圖表被登記
的圖表組關鍵爲子圖
該子圖的索引

這是你想要的第三個參數。這是您的seriesAccessor返回的密鑰，您可以使用任何想要基於該密鑰設置dashStyle的方法。

來源

2017-07-27 19:28:51 Gordon

非常感謝！我可以按照建議爲圖表函數使用第三個參數（Key），從而爲每行實現不同的dashStyle邏輯。你太棒了！另外，我想問是否有添加不同模式的方法？像三角形，大氣泡，垂直破折號等虛線除外，以清楚地區分每一行？我繪製20行和dashStyle方法已幫助我在模式中創建足夠的變化。只是想知道更多。 –

它看起來不像[任何瀏覽器都支持SVG的'marker-pattern']（https://stackoverflow.com/questions/41555688/svg-repeating-markers-through-the-line-path）。但是，該問題鏈接到[另一個答案]（https://stackoverflow.com/a/41108752/676195），這表明您可以將文本符號沿着行放置在％位置。 – Gordon

如何繪製DC.js系列圖表中不同線條的不同線條圖案？

回答

相關問題