D3.js не отображает график

Question

Я использую D3 в первый раз, и я выполнил инструкции на их сайте, чтобы добраться до этой точки. Кажется, я не могу отобразить диаграмму, хотя исключений в консоли JS в Chrome нет.

Вот JS в заголовке моей страницы:

<script> 
    var margin = { 
    top: 0, 
    right: 0, 
    bottom: 10, 
    left: 0 
}, 
width = 838 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var chart = d3.select(".day_chart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.json("http://solarmonitoringaustralia.com.au/myphp/inverterdata.php?var=TEST1&id=C120031", function (error, data) { 

    data.forEach(function (d) { 
     d.hour = +d.hour; // coerce to number 
     d.max_energy = +d.max_energy; 

     alert(d.hour + " -- " + d.max_energy); 
    }); 

    x.domain(data.map(function (d) { 
     return d.hour; 
    })); 
    y.domain([0, d3.max(data, function (d) { 
     return d.max_energy; 
    })]); 

    chart.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    chart.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    chart.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function (d) { 
     return x(d.hour); 
    }) 
     .attr("y", function (d) { 
     return y(d.max_energy); 
    }) 
     .attr("height", function (d) { 
     return height - y(d.max_energy); 
    }) 
     .attr("width", x.rangeBand()); 
}); 
</script> 

Код вызывает в запросе JSON на стороне сервера сценария. Вот данные, которые он возвращает в браузер при выполнении запроса:

[{"hour":"1","max_energy":"15.969"},{"hour":"2","max_energy":"19.065"},{"hour":"3","max_energy":"21.191"},{"hour":"4","max_energy":"23.151"},{"hour":"5","max_energy":"24.403"},{"hour":"6","max_energy":"25.082"},{"hour":"7","max_energy":"25.494"},{"hour":"8","max_energy":"25.499"},{"hour":"9","max_energy":"4.685"},{"hour":"10","max_energy":"7.309"},{"hour":"11","max_energy":"10.051"},{"hour":"12","max_energy":"13.119"}] 

Мой HTML содержит этот тег, где я хочу, чтобы появиться на графике:

<sgv class="day_chart"></svg> 

я могу видеть данные переходящие в JS выше через функцию «alert» в data.forEach (функция (d), поэтому данные возвращаются.

Страница загружается, но загружается с пустой областью, где будет отображаться диаграмма, и никаких ошибок JS в консоли Спасибо за любой совет!

Answer 1

Ну, это будет момент лица.

Единственное, что было неправильно, это опечатка.

<sgv class="day_chart"></svg> 

, конечно, должны быть

<svg class="day_chart"></svg> 

У меня есть рабочая версия здесь http://jsfiddle.net/cZxey/11/

(Я также установить библиотеку для загрузки D3 и вставляли жестко закодированные данные. Для работая с реальными данными, просто прокомментируйте это. О, и увеличьте свое нижнее заполнение, чтобы метки ваших меток не обрезались.)

--ABR