如何在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（）的組元素內獲得圓的位置？

回答

相關問題