0

d3js 文档说我可以使用 W3C 选择器规范来选择 DOM 中的对象。为什么下面的简单代码不起作用？实际上什么都没有出现。例如，如果我用 body 替换选择器，它就可以工作。但如果我针对特定的 div 或正文内的任何标记，则不会。

            <html>
                <head>
                    <link rel="stylesheet" href="style.css">
                    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
                    <script type="text/javascript" src="d3.v2.min.js"></script>
                    <title>Bleech</title>
                </head>
            <body>
                <script type="text/javascript">
                    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                            24, 18, 25, 9, 3 ];

                    d3.select("#chart").selectAll("p")
                                        .data(dataset)
                                        .enter()
                                        .append("div")
                                        .transition()
                                        .ease("linear")
                                        .attr("class", "bar")
                                        .duration(500)
                                        .style("height", function(d){
                                                return 10 * d;
                                            })
                                        .text(function(d){return d;});
                </script>

                <div id="chart"></div>

            </body>
            </html>
4

2 回答 2

3

我不知道 d3，但你为什么在 div 渲染之前调用这些方法？您可能希望将调用放在window.onload事件或 jQuery中document.ready（因为我看到您包含了库），如下所示：

$(document).ready(function () {
    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];
    d3.select("#chart").selectAll("p")
                       .data(dataset)
                       .enter()
                       .append("div")
                       .transition()
                       .ease("linear")
                       .attr("class", "bar")
                       .duration(500)
                       .style("height", function(d){
                               return 10 * d;
                           })
                       .text(function(d){return d;});
});
于 2012-10-16T17:08:19.557 回答
1

正如 Ian 所建议的，将 d3/js 代码包装在 $document.ready 函数中将确保 d3 在页面加载后执行，但确实增加了需要 jQuery 的开销。

另一种选择是简单地将 <div id="chart"> 行移到 <script> 代码上方，这样可以使其更简单。

<div id="chart"></div>
<script type="text/javascript">
...
d3.select("#chart").selectAll("p")
...
</script>

在所有 Mike Bostock（D3 的作者）的示例中，他使用后者（即他不倾向于混合 d3 和 jQuery）。

于 2015-08-11T07:33:21.060 回答