Question

我有一个散点图，其中x刻度是顺序的，y刻度是线性的。共享x值的圆圈放在他们自己的组中。

我正在使用rangeBands（）作为x-scale，因为我最终会为每个x值绘制一个盒子图。出于这个原因，我通过翻译g元素将我的圆圈定位在x轴上。

我想用画笔突出显示属于画笔范围的圆圈。我可以获得圆的cx和cy属性，但是这些值是相对于父g元素的，因此它们不能用于检查范围。

给定一个圆形元素，我如何获得父元素的位置？

到目前为止，我的代码是JSFiddle。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

#plot {
  border-style: solid;
  border-width: 4px;
  border-color: lightgrey;
  display: inline-block;
}

.extent {
  fill: grey;
  fill-opacity: 0.5;
  stroke: black;
  stroke-width: 1px;
}

circle.highlight {
  fill: yellow;
}

</style>
<script type="text/javascript" src="d3.js"></script>
</head>

<body>
<div id=plot>  
<script>

(function() {
  var data = [];

  for (i = 0; i < 100; i++) {
    var x = Math.random();
    var y = Math.floor(Math.random() * 100) + 1;

    if (x < 0.33) x = "red";
    else if (x < 0.66) x = "green";
    else x = "blue";

    data.push({x: x, y: y});
  }

  data = d3.nest()
      .key(function(d) { return d.x })
      .entries(data);

  var xScale = d3.scale.ordinal()
      .domain(data.map(function(d) { return d.key }))
      .rangeBands([0, 400], 0.5, 0.5);

  var yScale = d3.scale.linear()
      .domain([0, 100])
      .range([400, 0]);

  var svg = d3.select("#plot").append("svg")
      .attr("width", 400)
      .attr("height", 400)

  var brush = d3.svg.brush()
      .x(xScale)
      .y(yScale)
      .on("brushend", brushend);

  svg.call(brush);

  function brushend() {
    var e = brush.extent();
  }

  svg.selectAll("scatter")
      .data(data)
      .enter().append("g")
      .attr("transform", function(d) {
        return "translate(" + xScale(d.key) + ", 0)";
      })
      .each(scatter);

  function scatter(d) {
    var g = d3.select(this);

    g.selectAll("circle")
        .data(d.values)
        .enter().append("circle")
        .attr("r", 4)
        .attr("cx", function(d) { return xScale.rangeBand()/2 })
        .attr("cy", function(d) { return yScale(d.y) })
        .attr("fill", function(d) { return d.x });
  }                  
})();

</script>
</div>
</body>
</html>

Answer 1

将圈子设为this：

var parent = d3.select(this.parentNode),
    self = d3.select(this),        
    trans = d3.transform(parent.attr("transform")).translate,
    x = +self.attr('cx') + trans[0],
    y = +self.attr('cy') + trans[1];

x，y将是相对于svg的像素位置。

如何在D3.js中没有.on（）的情况下在一个组元素中获取圆的位置？

1 个答案: