Данные помещаются в неправильные даты на xaxis -nvd3

Я создал linelusBarChart с nvd3. Данные для графика - это таймсерии (как для линий, так и для столбцов), полученные от служб REST. Проблема, с которой я столкнулся, касается размещения данных на xAxis. Когда я уменьшаю масштаб графика, данные не размещаются на своих должностях (результат показан на рисунке ниже): enter image description here Но когда я увеличиваю масштаб, данные помещаются в даты, отличные от нужных (см. Изображение ниже): enter image description here Как я могу решить эту проблему?

Мой код:

chart = nv.models.linePlusBarChart()
                    .focusEnable(true) //gia na exei to focus Chart (range slider)     
                    .margin({ top: 50, right: 80, bottom: 30, left: 80 })
                    .color(["rgb(226, 144, 36)", "rgb(66, 30, 109)", "rgb(58, 112, 150)"]);
                    chart.xAxis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.y1Axis.axisLabel("Sentiment Value");

                chart.y2Axis.tickFormat(function (d) { return d3.format(',f')(d) });
                   chart.bars.forceY([0]).padData(false); 
                chart.lines.forceY([0]).padData(false);

                chart.x2Axis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.showLegend(false);

                multichart_graph = d3.select('#multichart svg');
                testdata.map(function (series) {
                series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } });
                return series;
                });

                multichart_graph.datum(testdata)
                    .transition()
                    .call(chart);

Обзор используемых данных:

var testdata = [{
                 "key": "Orange line", "values": [[1279314000, -0.476492389], [1279400400, -0.4764799323],[1279486800, -0.4764816604],....]}, 
                {
                 "key": "Forecast line", "values": [[1516140000, -1.0070195523], [1516226400, 3.9973810749],...]},
                {
                "key": "Bars", "values": [[1516140000, 3], [1516226400, 2], [1516312800, 3],...],"bar": "true"}
]

зачем использовать map, если вам действительно нужен forEach? без testdata очень тяжело смотреть

rioV8 10.09.2018 12:39

@ rioV8 Я добавил образец данных, которые получаю по этому вопросу.

T. ksaps 10.09.2018 13:58
0
2
94
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В зависимости от места, где вы получаете NVD3, ваш код не будет работать.

я использую

<script src="http://nvd3.org/assets/js/nv.d3.js"></script>

Это версия, которая отличается от кода github. У него нет chart.x2Axis для этого типа диаграммы.

Глядя на код (github и nvd3.org), гистограмма использует модель historicalBar для отображения гистограммы. При этом используется d3.extent значений x для домена xAxis (d3.scale.linear) значений, обозначенных как bar. Полосы размещены с использованием шкалы, но ширина полосы - width/data[0].values.length. Если вы добавите фиктивную точку данных в начале комбинированного домена (2010-07), в результате появятся огромные полосы. Невозможно контролировать ширину полосы пользователем и домен, используемый xScale.

Единственное решение - написать диаграмму самостоятельно.

Другие вопросы по теме