我已经使用d3和JS了一个多月，所以不确定我是否使用了正确的术语。基本上，我有一个散乱的散点图，因此我想在视觉上合并一些气泡，并且在用户单击所说的气泡时，我想实时地将它们可视化。径向树也许不是正确的术语，但基本上，如果我单击包含一个组的气泡，则想显示该组，并在用户单击其他内容时再次将其隐藏。数据集中已注释掉的JS行是我要在单击之前隐藏的行。 关于我应该在文档中寻找什么的任何指针？
我有此代码：
<!DOCTYPE html>
<html land = "en">
<head>
<meta charset="utf-8">
<title> MY TITLE GOES HERE</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type= "text/css">
body {
background-color: gray;
}
svg{
background-color:rgba(0,205,190,.5);
font-family: sans-serif;
font-weight: bolder;
font-size: 20px;
fill: black;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<div id= tooltip></div>
<script type= "text/javascript">
//set width and height for visualization
var w = 1200;
var h = 600;
var padding= 40;
//my dataset
var dataset = [
// {
// x: 1,
//y:0 ,
//r: 0,
//color:"crimson",
//city: "TEST",
//state: "TEST"
// },
//{
// x: 1,
//y:33.76,
//r: 14,
//color:"crimson",
//city: "Bakersfield",
// state: "California"
//},
//{
//x: 2,
//y: 35.58,
//r: 14,
//color: "crimson",
// city: "San Bernardino",
// state: "California"
// },
// {
// x: 3,
// y: 36.2,
// r: 14,
// color: "crimson",
// city: "Van Nuys",
// state: "California"
// },
// {
// x: 4,
// y: 37.46,
// r: 14,
// color: "crimson",
// city:"Los Angeles",
// state: "California"
// },
// {
// x: 5,
// y: 38.02,
// r: 14,
// color: "crimson",
// city: "Anaheim",
// state: "California"
// },
// {
// x: 6,
// y: 38.35,
// r: 14,
// color: "crimson",
// city: "Garden Grove",
// state: "California"
// },
// {
// x: 7,
// y: 38.55,
// r: 14,
// color: "crimson",
// city: "Riverside",
// state: "California"
// },
// {
// x: 8,
// y: 38.71,
// r: 14,
// color: "crimson",
// city: "Santa Ana",
// state: "California"
// },
{
x: 3,
y: 38.85,
r: 14,
color: "crimson",
city: "NoHo",
state: "California"
},
{
x:5,
y:41.08,
r: 20,
color: "crimson",
city:"Sacramento",
state: "California"
},
// {
// x:11,
// y:42,
// r: 20,
// color: "crimson",
// city:"Long Beach",
// state: "California"
// },
// {
// x:12,
// y:44.03,
// r: 20,
// color: "crimson",
// city:"Chula Vista",
// state: "California"
// },
// {
// x:13,
// y:44.44,
// r: 20,
// color: "crimson",
// city:"San Jose",
// state: "California"
// },
// {
// x:14,
// y:45.06,
// r: 20,
// color: "crimson",
// city:"El Cajon",
// state: "California"
// },
// {
// x:15,
// y:45.06,
// r: 20,
// color: "crimson",
// city:"SF",
// state: "California"
// },
// {
// x:16,
// y:45.71,
// r: 20,
// color: "crimson",
// city:"Vista",
// state: "California"
// },
// {
// x:17,
// y:47.75,
// r: 20,
// color: "crimson",
// city:"San Diego",
// state: "California"
// },
{
x:6,
y:29.06,
r: 8,
color: "indigo",
city:"Denver",
state: "Colorado"
},
{
x:7,
y: 29.34,
r: 8,
color: "indianred",
city:"Vancouver",
state:"CAN"
},
{
x:8,
y: 37.21,
r: 14,
color: "darkslategrey",
city:"Seattle",
state: "Washington"
},
{
x:9,
y:29.37,
r: 8,
color: "forestgreen",
city:"Portland",
state: "Oregon"
},
{
x:10,
y:35,
r: 14,
color: "indianred",
city:"Toronto",
state:"CAN"
},
{
x:11,
y:38.39,
r:14 ,
color: "goldenrod",
city:"Detroit",
state: "Michigan"
},
{
x:12,
y:59.29,
r: 25,
color:"brown",
city:"Washington",
state: "DC"
},
{
x:13,
y:50.78,
r: 25,
color: "tomato",
city:"Las Vegas",
state:"NV"
},
{
x:14,
y:53.9,
r: 25,
color: "steelblue",
city:"Anchorage",
state:"AK"
}
];
//create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){
return d.x + 1; // this confines viz to plot area, for whatever reason
})])
.range([w-25, 0]); //this confines viz, on the right side
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){
return d.y +2;
})])
.range([h, 0]);
//define x and y axis
var xAxis =d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(0);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(4);
//create svg element. Tell d3 where in the HTML to add the svg, and then tell it to "paste" it.
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//now tell d3 to add circles (that don't exist yet) to this new svg
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", w/2)
.attr("cy", h/2)
.attr("r", 1)
.transition()
.duration(1500)
.attr("cx", function(d){
return xScale(d.x- .5);
})
.attr("cy", function(d){
return yScale(d.y - 2.5)
})
.attr("r", function(d){
return d.r;
})
.attr("fill", function(d){
return d.color;
})
.attr('stroke','black')
.attr('stroke-width',.1)
//attach labels to the circles
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", "0px")
.attr("fill", "white")
.transition()
.duration(1500)
.text(function(d){
return d.city;
})
.attr("x", function(d){
return xScale(d.x-.1);
})
.attr("y", function(d){
return yScale(d.y -2);
})
.attr("font-family", "sans-serif")
.attr("font-size", "9px")
.attr("fill", "white")
//mouse interactivity
svg.selectAll("circle")
.on("mouseover", function(d){
d3.select(this)
.transition()
.duration(250)
.attr("r", 35)
.attr("stroke-width", 1)
})
.append("title")
.text(function(d){
return "$"+d.y;
})
//this is what happens when the user moves the mouse away from the circle
svg.selectAll("circle")
.on("mouseout", function(){
d3.select(this)
.transition()
.duration(250)
.attr("r", function(d){
return d.r;
})
.attr("stroke-width", .1)
});
//draw the x-axis
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate(0," + (h - padding + 5)+")")
.call(xAxis);
//now draw the y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform","translate("+ (padding - 5) + ",0)")
.call(yAxis);
</script>
</body>