无法在 D3 中渲染气泡图答案

【问题标题】：Cannot render Bubble Plot in D3无法在 D3 中渲染气泡图
【发布时间】：2020-04-21 15:17:46
【问题描述】：

我是 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")

  // -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
  var showTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
    tooltip
      .style("opacity", 1)
      .html("Country: " + d.country)
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var moveTooltip = function(d) {
    tooltip
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var hideTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", "bubbles")
      .attr("cx", function (d) { return x(d.average_distance); } )
      .attr("cy", function (d) { return y(d.average_rating); } )
      .attr("r", function (d) { return z(d.average_price); } )
      //.style("fill", function (d) { return myColor(d.neighbourhood); } )
    // -3- Trigger the functions
    .on("mouseover", showTooltip )
    .on("mousemove", moveTooltip )
    .on("mouseleave", hideTooltip )

  })
</script>

数据文件dis.csv如下所示。

社区，平均距离，平均价格，平均评级巴金和达格纳姆,16.526618528755,59.0354430379747,7.93924050632911 巴内特,12.751151469883,92.0958013010053,11.8509757539917 贝克斯利,18.1580008182515,57.7471698113208,7.53584905660377 布伦特,10.3436432756063,100.800074460164,18.4221891288161 布罗姆利,14.9177219546416,65.4205748865356,11.8804841149773 卡姆登,5.85923669412947,151.931821760353,22.4588253818296 市伦敦,3.70722693226053,186.349705304519,16.5795677799607 克罗伊登,14.6403980290548,59.3477876106195,11.5265486725664 伊灵,13.3971999943902,89.6941879413362,17.8636610537751 恩菲尔德,14.8985439168733,67.9623430962343,10.9274755927476 格林威治,11.2776211964939,88.2229806598407,15.5540386803185 哈克尼,6.31252669758104,95.7179083320208,14.6690817451567 哈默史密斯和富勒姆，8.34229043388886,146.747479376719,19.3581576535289 哈林盖,9.7826436450895,91.7137203166227,15.669744942832 哈罗,18.3924978247787,67.5371549893843,13.5477707006369 哈弗林,22.7843622856788,67.6127819548872,9.54135338345865 希灵登,23.46468208027,67.9574132492114,22.1009463722397 豪恩斯洛,15.5827484022907,108.430253623188,17.9773550724638 伊斯灵顿,5.69146140861572,119.251167315175,18.9865758754864 肯辛顿和切尔西,6.67384402946851,221.6757881261,16.720115218435 金斯顿安泰晤士河,17.4361944424088,81.9566003616636,15.0687160940325 兰贝斯,6.34905994119636,99.1709813365443,23.7096126831226 刘易舍姆,8.82684921199914,70.4588285229202,13.9898132427844 默顿,12.6377461483086,114.821480406386,10.7721335268505 纽汉,9.93361244178782,83.5518731988473,16.6474543707973 红桥,15.0144619601758,69.7047244094488,11.9829396325459 里士满在泰晤士河上，15.261338006403,130.270379338176,18.8757062146893 南华克,4.95718675921049,120.412512413108,22.1018867924528 萨顿,17.2159748211517,86.248427672956,15.2138364779874 塔哈姆雷特,5.62305116642439,96.018039123814,18.8169146070048 沃尔瑟姆森林,10.9700938985729,71.7155405405406,12.6182432432432 旺兹沃思,8.52133012729343,125.626654283724,14.8734618063617 威斯敏斯特,5.45604988702614,224.941819601718,19.8425419757907

我正在关注本教程https://www.d3-graph-gallery.com/graph/bubble_basic.html 当我渲染页面时，我看不到任何错误，也没有绘制图表。任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您的代码有几个问题：

一般你在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);

我已为您进行了这些更改，您可以查看codesandbox here 以获取工作示例。

【讨论】：

感谢您的详细解释，这将有助于我对 D3 有更有意义的了解。谢谢