1 回答
![?](http://img1.sycdn.imooc.com/54584c5e0001491102200220-100-100.jpg)
TA贡献1783条经验 获得超4个赞
您的代码有几个问题:
通常,您在 html<head>标记中调用 d3 库和色标。
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Load color scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
</head>
你<div id="my_dataviz"></div>和它下面的代码,即<script>包含所有可视化代码的标签需要放在 HTML<body>标签中。
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
//Your visualization script needs to go here
</script>
</body>
导入的数据d3.csv都是字符串格式。因此,您需要使用 foreach 循环键入转换您的数值数据,例如:
data.forEach(d => {
d.average_distance = +d.average_distance.trim();
d.average_price = +d.average_price.trim();
d.average_rating = +d.average_rating.trim();
});
您的色标需要映射到neighbourhood数据集中的 。
// Add a scale for bubble color
var myColor = d3
.scaleOrdinal()
.domain(data.map(d => d.neighbourhood))
.range(d3.schemeSet2);
我已经为您进行了这些更改,您可以在此处查看代码框以获取工作示例。
添加回答
举报