Javascript D3.js不显示图表

我第一次使用D3，我已经按照他们网站上的说明达到了这一点。虽然Chrome的JS控制台中没有异常，但我似乎无法显示图表

以下是我的页面标题中的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>

我的HTML包含我希望图表显示的标记：

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

我可以看到数据通过data.forEach（函数（d））中的“alert”函数传递到JS中，因此数据返回

---

页面会加载，但会加载一个空白区域，图表会显示在该区域，并且控制台中没有JS错误。谢谢您的建议！

好吧，这将是一个面部掌心时刻

唯一的错误就是打字错误

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

当然应该是

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

我这里有一个工作版本

（我还将库设置为加载D3，并插入硬编码数据。要处理真实数据，只需将其注释掉。哦，并增加底部填充，这样记号标签就不会被切断。）

---

--ABR

这个例子依赖于一个类为

day_chart

的元素出现——你有吗？嗨，Lars，谢谢你的回复。我已经修改了上面的帖子，把我的HTML包含在我想要呈现图表的地方：就像在例子中一样。你能发布一个完整的工作示例来演示pro吗麻烦，最好是像JSFIDLE这样的地方？嗨，Lars，我在这里构建：。我不确定的是，在JFIDLE中，如何链接外部JS库，以及如何链接到我的服务器端脚本（在d3.json函数中）.ThanksI已经在这里修改了JSFIDLE嗨，ABR，是的，face palm好吧，但不幸的是只有在我复制和粘贴到论坛的能力上！我原来的HTML是正确的。我已经编辑了帖子。谢谢！啊，好吧。我也有一点face palm的意思：我忽略了

显示4条评论

链接，在那里你解释说你会dy解决了问题。另外，你可以添加（并接受）你自己问题的答案，这样浏览列表的人一眼就能知道问题已经解决了。

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