我正在使用this bubble chart from D3，我想知道如何使用更多数据。
这是包含数据的对象
data: {
items: [
{text: "Java", count: "236"},
{text: ".Net", count: "382"},
{text: "Php", count: "170"},
{text: "Ruby", count: "123"},
{text: "D", count: "12"},
{text: "Python", count: "170"},
{text: "C/C++", count: "382"},
{text: "Pascal", count: "10"},
{text: "Something", count: "170"},
],
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
我想在该数组中的每个对象中添加更多属性，例如
data: {
items: [
{text: "Java", count: "236", phone: "32424234", email: "theemail@mail.com"},
{text: ".Net", count: "382", phone: "32424234", email: "theemail@mail.com"},
{text: "Php", count: "170", phone: "32424234", email: "theemail@mail.com"},
{text: "Ruby", count: "123", phone: "32424234", email: "theemail@mail.com"},
{text: "D", count: "12", phone: "32424234", email: "theemail@mail.com"},
{text: "Python", count: "170", phone: "32424234", email: "theemail@mail.com"},
{text: "C/C++", count: "382", phone: "32424234", email: "theemail@mail.com"},
{text: "Pascal", count: "10", phone: "32424234", email: "theemail@mail.com"},
{text: "Something", count: "170", phone: "32424234", email: "theemail@mail.com"},
],
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
如您所见，该图表有一个centralClick方法，我在其中调用提醒alert("Here is more details!!");，而不是该提醒，我想显示电话和电子邮件属性。因为在用户点击气泡之前应该隐藏这些属性。
如果您想查看完整代码而不想访问我上面粘贴的链接，那么这里就是
<!DOCTYPE html>
<html>
<head>
<title>Hello Bubble Chart</title>
<meta charset="utf-8">
<!-- scrips needed -->
<style>
.bubbleChart {
min-width: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #000000;
}
</style>
</head>
<body style="background: #000000">
<div class="bubbleChart"/>
</body>
</html>
index.js#
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3.5,
//outerRadius: => use @default
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: {
items: [
{text: "Java", count: "236"},
{text: ".Net", count: "382"},
{text: "Php", count: "170"},
{text: "Ruby", count: "123"},
{text: "D", count: "12"},
{text: "Python", count: "170"},
{text: "C/C++", count: "382"},
{text: "Pascal", count: "10"},
{text: "Something", count: "170"},
],
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "white"
},
attr: {dy: "65px"},
centralClick: function() {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: {count: true},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #1
textField: "text",
classed: {text: true},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
}
],
centralFormat: [
{// Line #0
style: {"font-size": "50px"},
attr: {}
},
{// Line #1
style: {"font-size": "30px"},
attr: {dy: "40px"}
}
]
}
}]
});
});
所以，为了达到我的需要，我该怎么做？
答案 0 :(得分：0)
您无需将javascript导入HTML
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
原因这会为您处理点击事件，您需要覆盖它。
相反，您编写自己的自定义单击事件处理程序，它将为您提供如下节点数据：
d3.svg.BubbleChart.define("central-click", function(options) {
var self = this;
self.setup = (function(node) {
var original = self.setup;
return function(node) {
var fn = original.apply(this, arguments);
self.event.on("click", function(node) {
//here you will get the data you want
console.log(node.data()[0].item)
});
return fn;
};
})();
self.reset = (function(node) {
var original = self.reset;
return function(node) {
var fn = original.apply(this, arguments);
node.select("text.central-click").remove();
return fn;
};
})();
self.moveToCentral = (function(node) {
var original = self.moveToCentral;
return function(node) {
var fn = original.apply(this, arguments);
var transition = self.getTransition().centralNode;
transition.each("end", function() {
node.append("text").classed({
"central-click": true
})
.attr(options.attr)
.style(options.style)
.attr("x", function(d) {
return d.cx;
})
.attr("y", function(d) {
return d.cy;
})
.text(options.text)
.style("opacity", 0).transition().duration(self.getOptions().transitDuration / 2).style("opacity", "0.8");
});
return fn;
};
})();
});
单击要控制其数据的节点，检查我的工作代码here。
希望这有帮助！