Javascript d3条形图不工作_Javascript_Html_D3.js_<img Src="//i.stack.imgur.com/RUiNP.png" Height="16" Width="18" Alt="" Class="sponsor Tag Img">elasticsearch

Javascript d3条形图不工作

javascript html d3.js

Javascript d3条形图不工作,javascript,html,d3.js,elasticsearch,Javascript,Html,D3.js,elasticsearch,我正在学习Mike Bostock关于d3框架条形图的教程。我想从elasticsearch响应制作条形图。我面临的问题是，他的代码中的一行毫无理由地不适合我。我的代码： HTML:index.HTML <body> <script type="text/javascript"> ping(); query1(); query2(); query3(); </script>

我正在学习Mike Bostock关于d3框架条形图的教程。我想从elasticsearch响应制作条形图。我面临的问题是，他的代码中的一行毫无理由地不适合我。我的代码：

HTML:index.HTML

<body>
    <script type="text/javascript">
        ping();
        query1();
        query2();
        query3();
    </script>
    <div id="bar-chart"></div>
    <div id="pie-chart"></div>
    <div id="bar-chart2"></div>
</body>

输出：控制台：

数据对象：

[{key: "carfindlychevy", doc_count: 12243}, {key: "carfindlyjeep", doc_count: 9876}, {key: "carfindlycali", doc_count: 7879}, {key: "carfindlyny", doc_count: 7737}, {key: "carfindly", doc_count: 7287}, {key: "carstexas", doc_count: 6663}, {key: "carfindlyfl", doc_count: 6617}, {key: "carfindlyaudi", doc_count: 6061}, {key: "carfindlymer", doc_count: 5604}, {key: "carfindlybmw", doc_count: 5480}]

我正在macOSx+Safari上工作。我希望我提供了所有需要的信息，谢谢您的建议。

将您的JavaScript代码放在所有HTML元素的末尾，您的代码是正确的，但是它在HTML元素初始化之前执行，因此无法找到条形图2和/或svg

编辑：

从您的屏幕截图中，我看到您使用V2。D3版本之间有一些变化，V4之前不存在scaleBand等函数。因此，在导入时使用V4：

<script src="https://d3js.org/d3.v4.js"></script>

也许共享您的数据会有所帮助？我编辑了这样的代码：但没有新的事情发生。奇怪的是，之前的图表运行良好。第一张图表来自query1，第二张来自query2，依此类推。我根据您的屏幕截图进行了另一次编辑，这次看起来像是版本问题@bzadmThank，您的解决方案成功了。现在我的其他图表不起作用了，因为它们使用了旧版本的d3.js，但至少我知道问题出在哪里，所以我会尝试修复它们@真空

[{key: "carfindlychevy", doc_count: 12243}, {key: "carfindlyjeep", doc_count: 9876}, {key: "carfindlycali", doc_count: 7879}, {key: "carfindlyny", doc_count: 7737}, {key: "carfindly", doc_count: 7287}, {key: "carstexas", doc_count: 6663}, {key: "carfindlyfl", doc_count: 6617}, {key: "carfindlyaudi", doc_count: 6061}, {key: "carfindlymer", doc_count: 5604}, {key: "carfindlybmw", doc_count: 5480}]

<script src="https://d3js.org/d3.v4.js"></script>