如何在D3.js中没有.on（）的组元素内获得圆的位置？

我有一个散点图，其中x尺度是有序的，而y尺度是线性的。共享x值的圈子被放置在他们自己的组中。如何在D3.js中没有.on（）的组元素内获得圆的位置？

我使用rangeBands（）作为x尺度，因为我最终会为每个x值绘制一个箱形图。出于这个原因，我通过转换g元素将我的圆圈放置在x轴上。

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

给定一个圆形元素，我如何获得父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>

来源

2015-10-05 user2829582

给定一个圆作为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的像素位置。

来源

2015-10-05 16:07:38 Mark

如何在D3.js中没有.on（）的组元素内获得圆的位置？

回答

相关问题