如何在 DC.js 系列图表中为不同的线条绘制不同的线条图案？

Question

这是我生成的图表图像：Current Series Chart

我已将 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;

如有任何帮助，我们将不胜感激！

Answer 1

行

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

提供生成子图的功能。此函数的参数 appear to be undocumented, but a quick look at the source reveals

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

该函数采用以下参数：

合成图
复合图表注册的图表组
子图的键
子图的索引

这是您想要的第三个参数。这是您的 seriesAccessor 返回的密钥，您可以根据该密钥使用任何您想设置 dashStyle 的方法。

如何在 DC.js 系列图表中为不同的线条绘制不同的线条图案？

How to plot different line patterns for different lines in DC.js series chart?

javascript

d3.js

dc.js