Question

我有一个演示here

我有一个带有鼠标悬停的堆叠式面积图，其中显示了带有该图区域信息的工具提示。

我还要在鼠标悬停时显示该部分中数据点的圆圈。

我在onmouseover上调用函数showDataPoints，并且正在传递该部分的数据

function showDataPoints(data, block){
      let pointData = {};
      chartKeys.forEach(key => pointData[key] = data[key]);
      console.log(pointData)

      for(let p in pointData){
        //add circle use data for x pos
      }

      // const dataPoints = block.selectAll('circle')
      //   .data(pointData)

      //   dataPoints
      //     .enter()
      //     .append('circle')
      //     .classed('circles', true)
      //     .style('fill', 'black')
      //     .attr('r', 4)
      //     .attr('cx', (d) => this.x(d))
      //     .attr('cy', (d) => this.y(d))
    }

我无法与.enter() .append()一起使用

有没有一种方法可以添加没有附加的圈子

Answer 1

从您最初的问题出发，尚不清楚您的具体目标是什么，但似乎您想将pointData用作数据array，因此以下是一个可能答案的草案：

var chartKeys = ['one', 'two', 'three'];

function showDataPoints(data, block){
  let pointData = [];
  chartKeys.forEach(key => pointData.push({key: key, value: data[key]}));

  console.log(pointData)
  // prints out [{key: "one", value: 10}, {key: "two", value: 45}, {key: "three", value: 45}]


  const dataPoints = block.selectAll('circle')
     .data(pointData)

     dataPoints
       .enter()
       .append('circle')
    //using d in a function could be like d = {key: "three", value: 45}
}

d3-添加元素而不添加

1 个答案: