Question

d3js doc说我可以使用W3C选择器规范来选择DOM中的对象。为什么下面的简单代码不起作用？实际上没有任何东西出现。如果我用身体替换选择器，例如它的工作原理。但是如果我针对特定的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>

Answer 1

我不知道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;});
});

Answer 2

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

另一种选择是简单地移动＆lt; div id =“chart”＆gt;在＆lt; script＆gt;上方的行代码，使其更简单。

MyModel.remove()

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

d3js w3c选择器

2 个答案: