Как построить разные образцы линий для разных линий в графике серии DC.js?

Question

Как построить разные образцы линий для разных линий в графике серии DC.js?

1

Это изображение диаграммы, которую я создал: Current Series Chart

Я применил функцию dashStyle к объекту linechart, который применил тот же шаблон ко всем строкам. Мне нужно построить диаграмму серии с каждой строкой, имеющей другой рисунок (пунктирная, пунктирная, плоская линия и т.д.). В объекте "c" в функции диаграммы много атрибутов. Я не уверен, какой атрибут соответствует значениям данных. Атрибут data объекта "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;

Любая помощь приветствуется!

Yash Nigam 27 июль 2017, в 09:19

Источник

Теги:

javascript

d3.js

dc.js

1 ответ

Ещё вопросы

Gordon · Accepted Answer · 2017-07-27T17-02-00.000Z

Линия

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

предоставляет функцию, которая генерирует подматрицы. Параметры этой функции выглядят недокументированными, но быстрый взгляд на источник показывает

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

что функция принимает следующие параметры:

составная диаграмма
группа диаграмм, в которой зарегистрирована составная диаграмма
ключ для подзаголовка
индекс для подзаголовка

Это третий аргумент, который вы хотите. Это ключ, возвращаемый вашим seriesAccessor, и вы можете использовать любой метод, который вы хотите установить dashStyle на основе этого ключа.

Большое спасибо! Я смог реализовать различную логику dashStyle для каждой строки, используя третий аргумент (Key) для функции диаграммы, как было предложено. Ты обалденный! Кроме того, я хочу спросить, есть ли способ добавить различные шаблоны? Подобно треугольникам, большим пузырькам, вертикальным штрихам и т. Д., Кроме пунктирных линий, чтобы четко различать каждую линию, я рисую 20 линий, и метод dashStyle помог мне создать достаточно вариаций в шаблонах. Просто интересно узнать больше.
Похоже, что ни один браузер пока не поддерживает marker-pattern SVG . Но этот вопрос связан с другим ответом, который показывает, что вы можете размещать текстовые символы в позициях% вдоль линий.