Question

var raphael = new Raphael(document.body,500,500);
raphael.setStart();
var d3_raphael = d3.raphael(raphael);
var stuff = {className:"", children:[
{className:"TVI",  packageName:'aa', value:2000},
{className:"SIC",  packageName:'aa', value:1520},
{className:"RTP1", packageName:'bb', value: 1400},
{className:"SIC",  packageName:'aa', value:1220},
{className:"RTP1", packageName:'bb', value: 1100},
{className:"SIC",  packageName:'aa', value:920},
{className:"RTP1", packageName:'bb', value: 800},
{className:"SIC",  packageName:'aa', value:1520},
{className:"RTP1", packageName:'bb', value: 1400},
{className:"SIC",  packageName:'aa', value:1220},
{className:"RTP1", packageName:'bb', value: 1100},
{className:"SIC",  packageName:'aa', value:920},
{className:"RTP2  manoj", packageName:'bb', value: 550}
]};

var r = 400,
format = d3.format(",d"),
fill = d3.scale.category10();

var bubble = d3.layout.pack()
.sort(function(a, b) {return b.value - a.value;})
.size([r, r]);

 var chart = d3_raphael.select("body").append("svg:svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");    
 var node = chart.selectAll("circle")
.data(bubble.nodes(stuff))
.enter().append("circle")
    .attr("class", "node")
    .attr("cx",function(d) { return d.x; })
    .attr("cy",function(d) { return d.y; })
    .attr("r", function(d) { return d.r; })
    .attr("fill", function(d) { return fill(d.packageName); })
    .mouseover(function() { 
    circle.append("<p>MouseOver</p>");
});

但它给了我错误 Uncaught TypeError: Object [object Array] has no method 'mouseover'。我想将所有鼠标添加到其上的事件

如何解决此问题。

Answer 1

在d3中执行此操作的方法是使用on()函数：

.on("mouseover", function() { 
    d3.select(this).append("<p>MouseOver</p>");
});

请注意，<p>代码无法在SVG中使用 - 但您可以使用foreignObject。请参阅示例here。

我想使用raphael将mouseover事件添加到我的代码中？

1 个答案: