javascript - D3js，如何基于轴值(而非像素)设置点

我有这种情节。在那我按像素放置点。

let svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    x = d3.scaleLinear().domain([20 , 20000]).range([0, width]),
    y = d3.scaleLinear().domain([-18 , 18]).range([height, 0]),
    axisBottom = d3.axisBottom(x),
    axisLeft =  d3.axisLeft(x),
    points =[[100, 100], [300, 200]],
    circleRadius = 10;

    // How can I set points if I have data like
		// points =[[5, 6000], [-10, 18500]], not pixels but axis units


svg.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + height/2 + ')')
    .call(axisBottom);

svg.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y));

let groupForCircles = svg.append('g').attr('id', 'groupForCircles')

points.forEach(e => {
    groupForCircles.append("g")
        .append("circle")
        .attr("cx", e[0])
        .attr("cy", height/2)
        .attr("r", circleRadius)
        .style("fill", "purple")
})

svg {
          border: 1px solid #ccc;
          display: block;
          margin: auto;
          overflow: visible;
          margin-top: 25px;
      }

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="300"></svg>

问题是，如果我仅具有基于轴的值，该如何在绘图上设置点？
例如，我有[5, 6000]，其中第一个数字是Y轴值，第二个数字是X轴值。如何基于该值而不是像素在图形上放置点？谢谢！

这是jsFiddle Link

最佳答案

x和y刻度用于将您的值转换为适当的图表坐标。要添加坐标，只需要使用创建的比例来生成正确的x和y坐标：

groupForCircles
  .append('circle')
  .attr('cx', d => x(d[0]) ) // `x` is your x scale, `y` is the y scale
  .attr('cy', d => y(d[1]) )

看来您已在建议的数据点中切换了x和y值，因此我对代码进行了一些改动以解决这一问题。我还使用了标准的d3数据绑定来简化点的添加和操作，而不是使用forEach循环：

const moreData = [ [5, 6000], [-10, 18500], [2, 2000], [-18, 100] ]

groupForCircles.selectAll('.dataPoint')
  .data(moreData)             // bind the data
 .enter()                     // this is the new data being added to the chart
 .append('circle')            // add a circle element for each data element
  .classed('dataPoint', true)
  .attr('cx', d => x(d[1]) )  // use the second of the pair as the x coordinate
  .attr('cy', d => y(d[0]) )  // and the first as the y
  .attr('r', 4)
  .style('fill', 'deepskyblue');

完整演示：

let svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    x = d3.scaleLinear().domain([20 , 20000]).range([0, width]),
    y = d3.scaleLinear().domain([-18 , 18]).range([height, 0]),
    axisBottom = d3.axisBottom(x),
    axisLeft =  d3.axisLeft(x),
    points =[[100, 100], [300, 200]],
    moreData = [ [5, 6000], [-10, 18500], [2, 2000], [-18, 100] ],
    circleRadius = 10;

    // How can I set points if I have data like
		// points =[[5, 6000], [-10, 18500]], not pixels but axis units


svg.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + height/2 + ')')
    .call(axisBottom);

svg.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y));

let groupForCircles = svg.append('g').attr('id', 'groupForCircles')

points.forEach(e => {
    groupForCircles.append("g")
        .append("circle")
        .attr("cx", e[0])
        .attr("cy", height/2)
        .attr("r", circleRadius)
        .style("fill", "purple")
})

groupForCircles.selectAll('.dataPoint')
  .data(moreData)
  .enter()
 .append('circle')
  .classed('dataPoint', true)
  .attr('cx', d => x(d[1]) )
  .attr('cy', d => y(d[0]) )
  .attr('r', 4)
  .style('fill', 'deepskyblue');

svg {
          border: 1px solid #ccc;
          display: block;
          margin: auto;
          overflow: visible;
          margin-top: 25px;
      }

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="300"></svg>