无法在 D3 中渲染气泡图
我是 D3 的新手，并试图绘制下面的气泡图。
<!DOCTYPE html>
<meta charset="utf-8">
<!-- 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>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("dis.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 30])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 30])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add a scale for bubble size
var z = d3.scaleLinear()
.domain([0, 300])
.range([ 4, 40]);
// Add a scale for bubble color
var myColor = d3.scaleOrdinal()
.domain(["Asia", "Europe", "Americas", "Africa", "Oceania"])
.range(d3.schemeSet2);
// -1- Create a tooltip div that is hidden by default:
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("color", "white")
我正在关注本教程https://www.d3-graph-gallery.com/graph/bubble_basic.html ，当我渲染页面时，我看不到任何错误，也没有绘制图表。任何帮助，将不胜感激。
吃鸡游戏1回答
-
慕娘9325324
您的代码有几个问题：通常，您在 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);我已经为您进行了这些更改，您可以在此处查看代码框以获取工作示例。
随时随地看视频慕课网APP
相关分类
JavaScript