Невозможно отобразить строку в D3 bar/line chart

Я пытаюсь создать комбинацию и линейный график. Полоса представляет собой первичную ось y, представляющую данные. Общая и линия - это вторичная ось y, представляющая data.percent.Невозможно отобразить строку в D3 bar/line chart

Отказ от ответственности: Я очень плохо знаком с javascript и D3.

Я часами пытаюсь понять, почему диаграмма не отображает линейную серию. Некоторые из этого кода были основаны на других примерах шаблонов, которые я нашел в Интернете, поэтому там может быть что-то, что не кошерно с моими изменениями, и я полностью пропустил его.

Спасибо за помощь заранее!

Вот что у меня есть:

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<STYLE>`enter code here` 
svg{ padding-left: 100 px} 
path { 
    stroke: Black; 
    stroke-width: 1; 
    fill: none; 
} 
.chartTitle{ 
    color: #002b80; 
    font-size: 32pt; 
    font-weight: bold; 
    text-align: left; 
    padding-left: 20px; 

} 
</STYLE> 
</HEAD> 
<BODY> 
<div class="chartTitle">Estimate of "Everything is Awesome"</div> 
<SCRIPT SRC = 'd3.min.js'></SCRIPT> 
<SCRIPT> 

var data = [ 
    {'date': '4/1/2015', 'total':500, 'percent':0.535}, 
    {'date': '5/1/2015', 'total': 650, 'percent': 0.593}, 
    {'date': '6/1/2015', 'total': 700, 'percent': 0.687}, 
    {'date': '7/1/2015', 'total': 750, 'percent': 0.734}, 
    {'date': '8/1/2015', 'total': 800, 'percent': 0.988}, 
    {'date': '9/1/2015', 'total': 850, 'percent': 0.99}, 
    {'date': '10/1/2015', 'total': 900, 'percent': 1.0} 
    ]; 

var margin = {top: 70, right: 70, bottom: 70, left:60}, 
    width = 600, 
    height = 500; 


var toolTip = d3.select('body').append('div') 
     .style('position', 'absolute') 
     .style('background', 'white') 
     .style('opacity', .9) 
     .style('padding', '0 20px') 
     .style('border-radius', '25px') 
     .style('border', ' 2px solid dodgerblue') 

// X and Y Axis   
var xScale = d3.time.scale() 
    .domain([new Date(data[0].date), d3.time.month.offset(new Date(data[data.length - 1].date), 0)]) 
    .rangeRound([0, width - margin.left - margin.right ]); 

var y1Scale = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d.total;})]) 
    .range([height - margin.top - margin.bottom, 0]); 

var y2Scale = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d.percent;})]) 
    .range([height - margin.top - margin.bottom, 0]); 


var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient('bottom') 
    .ticks(d3.time.month, 1) 
    .tickFormat(d3.time.format('%b -%y')) 
    .tickSize(1) 
    .tickPadding(8); 

var y1Axis = d3.svg.axis() 
    .scale(y1Scale) 
    .orient('left') 
    .tickPadding(8) 
    .tickSize(1); 

var y2Axis = d3.svg.axis() 
    .scale(y2Scale) 
    .orient('right') 
    .tickPadding(8) 
    .tickSize(1); 

var lineData = d3.svg.line() 
    .x(function(d) { return xScale(d.date); }) 
    .y(function(d) { return -1 * y2Scale(d.percent); }); 

//Chart Body  
var svg = d3.select('body').append('svg') 
    .attr('class', 'chart') 
    .attr('width', width) 
    .attr('height', height) 
    .append('g') 
     .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); 

//Chart Body Creation 
svg.selectAll('.chart') 
    .data(data) 
    .enter().append('rect') 
    .style('fill', 'dodgerblue') 
    .attr('class', 'bar') 
    .attr('x', function(d) { return xScale(new Date(d.date)); }) 
    .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y1Scale(d.total)) }) 
    .attr('width', 20) 
    .attr('height', function(d) { return height - margin.top - margin.bottom - y1Scale(d.total) }) 
// Roll over SFX  
    .on('mouseover', function (d) { 
     toolTip.transition() 
     .style('opacity', .9) 
     toolTip.html(d.total) 
     .style('left', (d3.event.pageX - 40) + 'px') 
     .style('top', (d3.event.pageY - 30) + 'px') 
     d3.select(this) 
     .style('opacity', 0.5) 
     }) 
    .on('mouseout', function (d) { 
     toolTip.transition() 
     .delay(100) 
     .duration(600) 
     .style('opacity', 0) 
     .style('pointer-events', 'none') 
     d3.select(this) 
     .style('opacity', 1) 
     }); 

//lDraw Line   
svg.append("path") 
    .attr("d", lineData(data)) 
    .style('stroke', 'DarkOrange'); 

//Draw the X Axis 
svg.append('g') 
    .attr('class', 'x axis') 
    .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')') 
    .call(xAxis); 
//Draw the Y1 Axis 
svg.append('g') 
    .attr('class', 'y axis') 
    .call(y1Axis); 

//Draw the Y2 Axis 
svg.append('g') 
    .attr('class', 'y axis') 
    .attr("transform", "translate(" + (height) + " ,0)") 
    .call(y2Axis); 
    </SCRIPT> 
</BODY> 
</HTML>

источник

2015-12-01 npeach

Задача 1:

У вас есть дата в этом формате {'date': '10/1/2015', 'total': 900, 'percent': 1.0} в вашем JSON, вам нужно будет преобразовать в дату объекта.

var format = d3.time.format("%d/%m/%Y"); 
data.forEach(function(d){ 
    d.date = format.parse(d.date); 
});

Для различного формата даты разборе refer

задачи2:

Вы определяете домен неверно

var xScale = d3.time.scale() 
    .domain([new Date(data[0].date), d3.time.month.offset(new Date(data[data.length - 1].date), 0)]) 
    .rangeRound([0, width - margin.left - margin.right ]);

Домен должен быть мин/макс даты.

var xScale = d3.time.scale() 
    .domain([d3.min(data, function(d){return d.date}), d3.max(data, function(d){return d.date})]) 
    .rangeRound([0, width - margin.left - margin.right]);

Причина почему линия не составление

var lineData = d3.svg.line() 
    .x(function(d) { return xScale(d.date); })//this date is not in the correct format so d3 does not know what to do and so gives NaN. 
    .y(function(d) { return -1 * y2Scale(d.percent); });

Теперь задача 1 будет решить эту проблему, так как мы преобразовали данные в актуальном состоянии.

Рабочего примеру here

Надеется, что это помогает!

источник

2015-12-02 01:15:15 Cyril

Это сработало! Я обнаружил, что мне пришлось настроить переменную формата на следующее: var format = d3.time.format ("% m /% d /% Y"); данные.forEach (функция (d) { d.date = format.parse (d.date); }); , когда он был% d% m% Y, он регистрировал месяц как день и отображал все как январь в метке оси x. Вы спасатель жизни. Спасибо огромное! – npeach

Невозможно отобразить строку в D3 bar/line chart

ответ

Смежные вопросы