为了账号安全,请及时绑定邮箱和手机立即绑定

无法在 D3 中渲染气泡图

无法在 D3 中渲染气泡图

吃鸡游戏 2022-07-08 17:00:32
我是 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 graphvar 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 pagevar 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 datad3.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

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);

我已经为您进行了这些更改,您可以在此处查看代码框以获取工作示例。


查看完整回答
反对 回复 2022-07-08
  • 1 回答
  • 0 关注
  • 74 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信