Question

我正在尝试在d3中构建一个简单的散点图。在图表中，我希望能够在x轴刻度中获取文本节点，并对其自动计算的宽度进行求和。对于初学者，我试图控制日志相同。

这是我正在尝试做的事情：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>D3: Transitioning points to randomized values</title>
  <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
  <style type="text/css">
    /* No style rules here yet */
  </style>
</head>

<body>

  <p>Click on this text to update the chart with new data values as many times as you like!</p>

  <script type="text/javascript">
    //Width and height
    var w = 500;
    var h = 300;
    var padding = 30;

    //Dynamic, random dataset
    var dataset = []; //Initialize empty array
    var numDataPoints = 50; //Number of dummy data points to create
    var maxRange = Math.random() * 1000; //Max range of new values
    for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
      var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
      var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
      dataset.push([newNumber1, newNumber2]); //Add new number to array
    }

    //Create scale functions
    var xScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function(d) {
        return d[0];
      })])
      .range([padding, w - padding * 2]);

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function(d) {
        return d[1];
      })])
      .range([h - padding, padding]);

    //Define X axis
    var xAxis = d3.axisBottom()
      .scale(xScale)
      .ticks(5);

    //Define Y axis
    var yAxis = d3.axisLeft()
      .scale(yScale)
      .ticks(5);

    //Create SVG element
    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    //Create circles
    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return xScale(d[0]);
      })
      .attr("cy", function(d) {
        return yScale(d[1]);
      })
      .attr("r", 2);

    //Create X axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xAxis);

    //Create Y axis
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis);

    //GETTING ERROR ON THIS LINE        
    console.log([...d3.selectAll(".x.axis").node().childNodes].slice(1).reduce(function(a, b) {
      console.log(a);
      return a.getBoundingClientRect().width + b.getBoundingClientRect().width
    }))

    //On click, update with new data			
    d3.select("p")
      .on("click", function() {

        //New values for dataset
        var numValues = dataset.length; //Count original length of dataset
        var maxRange = Math.random() * 1000; //Max range of new values
        dataset = []; //Initialize empty array
        for (var i = 0; i < numValues; i++) { //Loop numValues times
          var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
          var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
          dataset.push([newNumber1, newNumber2]); //Add new number to array
        }

        //Update scale domains
        xScale.domain([0, d3.max(dataset, function(d) {
          return d[0];
        })]);
        yScale.domain([0, d3.max(dataset, function(d) {
          return d[1];
        })]);

        //Update all circles
        svg.selectAll("circle")
          .data(dataset)
          .transition()
          .duration(1000)
          .attr("cx", function(d) {
            return xScale(d[0]);
          })
          .attr("cy", function(d) {
            return yScale(d[1]);
          });



      });
  </script>
</body>

</html>

但是，我收到以下错误（在console.log上）：

未捕获的TypeError：a.getBoundingClientRect不是函数

我在这里做错了什么？我已经使用... spread运算符将nodeList转换为数组，因此不应该是一个问题。

注意：由于某种原因，堆栈溢出无法运行我的代码，所以请使用单独的HTML文件来测试它。很抱歉给您带来不便

Answer 1

Reduce的第一个返回参数是累加器，AKA从之前的reduce运行中返回的内容。这意味着在第二次迭代中，“a”是23.10938262939453而不是节点。尝试这样的事情：

console.log([...d3.selectAll(".x.axis").node().childNodes].slice(1).reduce(function(a, b) {
  if(typeof a == 'number'){
    return a + b.getBoundingClientRect().width;
  }else
  return a.getBoundingClientRect().width + b.getBoundingClientRect().width
}))

如果你想要那么干净，我会这样做：

console.log([...d3.selectAll(".x.axis").node().childNodes].slice(1)
  .map(a=>a.getBoundingClientRect().width)
  .reduce((a, b) => a + b));

stackblitz here.

在dom元素对象上使用reduce函数

1 个答案: