Question

我正在尝试使用csv文件中的D3绘制散点图。 csv看起来像这样：

location    smokeSomeDays   allFamPovPct
AL                5%             15%
AK                5%             8%
AZ                4%             13%
AR                6%             14%
CA                4%             12%
CO                4%             8%
CT                4%             8%
DE                4%             9%
DC                5%             14%
...
...
...

我希望Y轴是'smokeSomeDays'而X轴是'allFamPovPct'

这是我的js唤起“无法读取属性'getAttribute'的null”错误，即使代码中的任何地方都没有提到'getAttribute'：

var svgW = 960;
var svgH = 500;

var margin = { top: 20, right: 40, bottom: 60, left: 50 };

var chartWidth = svgW - margin.left - margin.right;
var chartHeight = svgH - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", svgW)
  .attr("height", svgH)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv('data.csv', function(data) {
  data.forEach(function () {
  // Scales
    var xScale = d3.scaleLinear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return d.allFamPovPct })]),
      d3.max([0,d3.max(data,function (d) { return d.allFamPovPct })])
      ])
    .range([0,chartWidth])
  var yScale = d3.scaleLinear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return d.smokeSomeDays })]),
      d3.max([0,d3.max(data,function (d) { return d.smokeSomeDays })])
      ])
    .range([chartHeight,0])
  // X-axis
  var xAxis = d3.axisBottom()
    .scale(xScale)
    .ticks(5)
  // Y-axis
  var yAxis = d3.axisLeft()
    .scale(yScale)
    .ticks(5)
  // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
     .append('circle')
      .attr('cx',function (d) { return xScale(d.allFamPovPct) })
      .attr('cy',function (d) { return yScale(d.smokeSomeDays) })
      .attr('r','10')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill')

  svg.append('g')
      .attr('class','axis')
      .attr('transform', 'translate(0,' + chartHeight + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('class','label')
      .attr('y',-10)
      .attr('x',chartWidth)

  svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)
     .append('text') // y-axis Label
      .attr('class','label')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)

});
});

完整错误消息msg如下所示：

Uncaught TypeError: Cannot read property 'getAttribute' of null  d3.min.js:4
at dt.ul [as attr] (d3.min.js:4)
at app.js:49
at Array.forEach (<anonymous>)
at app.js:17
at d3.min.js:3
at Object.<anonymous> (d3.min.js:7)
at v.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)

但错误中提到的所有行对我来说都很好，也许我错过了一些东西。

代码也不会产生我想要的散点图。它给了我这样的东西：

|
|
|
|
|
|
|
|
|
O ---------------------------------------

这是我的HTML，如果它有帮助：

    <!DOCTYPE html>
    <html>
      <head>
        <title>Data Journalism</title>
<style>
.chart {

}

.main text {
    font: 10px sans-serif;  
}

.axis circle, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}

circle {
    fill: steelblue;
}

</style>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js">
</script>
      </head>
      <body>
        <div class='content'></div>
        <script type="text/javascript" src="app.js"></script>
      </body>
    </html>

提前感谢您的帮助！

Answer 1

你现在得到的错误是因为......

.attr("fill")

...是一个 getter ，而不是一个setter。请记住，D3库会抛出此错误，但您的控制台会显示您的代码行，这是真正的罪魁祸首。

然而，这是你在这里遇到的最少的问题。

第一个大问题是回调中的forEach。这在D3代码中完全没有必要。摆脱它。

第二个问题是smokeSomeDays和allFamPovPct是字符串，而不是数字。您必须将它们转换为数字才能使用您的比例。在这个例子中，我使用的是行函数：

function(d){
    d.smokeSomeDays = +d.smokeSomeDays.split("%")[0];
    d.allFamPovPct = +d.allFamPovPct.split("%")[0];
    return d;
}

以下是包含这些更改的代码（以及CSV的几行）：

var csv = `location,smokeSomeDays,allFamPovPct
AL,5%,15%
AK,5%,8%
AZ,4%,13%
AR,6%,14%`;

var svgW = 400;
var svgH = 300;

var margin = {
  top: 20,
  right: 40,
  bottom: 60,
  left: 50
};

var chartWidth = svgW - margin.left - margin.right;
var chartHeight = svgH - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", svgW)
  .attr("height", svgH)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = d3.csvParse(csv, function(d) {
  d.smokeSomeDays = +d.smokeSomeDays.split("%")[0];
  d.allFamPovPct = +d.allFamPovPct.split("%")[0];
  return d;
})

var xScale = d3.scaleLinear()
  .domain([
    d3.min([0, d3.min(data, function(d) {
      return d.allFamPovPct
    })]),
    d3.max([0, d3.max(data, function(d) {
      return d.allFamPovPct
    })])
  ])
  .range([0, chartWidth])
var yScale = d3.scaleLinear()
  .domain([
    d3.min([0, d3.min(data, function(d) {
      return d.smokeSomeDays
    })]),
    d3.max([0, d3.max(data, function(d) {
      return d.smokeSomeDays
    })])
  ])
  .range([chartHeight, 0])
  // X-axis
var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(5)
  // Y-axis
var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(5)
  // Circles
var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    return xScale(d.allFamPovPct)
  })
  .attr('cy', function(d) {
    return yScale(d.smokeSomeDays)
  })
  .attr('r', '10')
  .attr('stroke', 'black')
  .attr('stroke-width', 1)
  .attr("fill", "teal");

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,' + chartHeight + ')')
  .call(xAxis)
  .append('text') // X-axis Label
  .attr('class', 'label')
  .attr('y', -10)
  .attr('x', chartWidth)

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis)
  .append('text') // y-axis Label
  .attr('class', 'label')
  .attr('transform', 'rotate(-90)')
  .attr('x', 0)
  .attr('y', 5)

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

Answer 2

多次加载库/多次初始化相同的id可能会出现问题

得到“无法读取属性'getAttribute'的null”错误

2 个答案: