【发布时间】：2016-04-29 06:25:03
【问题描述】：
我创建了一个多折线图，但我一直在努力添加一个 voronoi 以获得更好的鼠标交互。任何帮助我指出正确方向的帮助将不胜感激。
这是我的数据：
U.S. Custom Ports,Coast,Year,Value
"Aberdeen, WA",P,1997,0
"Aberdeen, WA",P,1998,24
"Aberdeen, WA",P,1999,3284.95
"Aberdeen, WA",P,2000,0
"Aberdeen, WA",P,2001,78.83
"Aberdeen, WA",P,2002,75.16
"Aberdeen, WA",P,2003,0
"Aberdeen, WA",P,2004,0
"Aberdeen, WA",P,2005,194.35
"Aberdeen, WA",P,2006,0
"Aberdeen, WA",P,2007,0
"Aberdeen, WA",P,2008,0
"Aberdeen, WA",P,2009,45.14
"Aberdeen, WA",P,2010,303
"Aberdeen, WA",P,2011,680.42
"Aberdeen, WA",P,2012,437.43
"Aberdeen, WA",P,2013,2436.97
"Aberdeen, WA",P,2014,894.86
"Anacortes, WA",P,1997,0
"Anacortes, WA",P,1998,0
"Anacortes, WA",P,1999,0
"Anacortes, WA",P,2000,0
"Anacortes, WA",P,2001,0
"Anacortes, WA",P,2002,0
"Anacortes, WA",P,2003,0
"Anacortes, WA",P,2004,0
"Anacortes, WA",P,2005,0
这是我的代码：
function drawMultiLine(){
var container = d3.select('#g-multiline');
var margin = {top:10, right: 80, bottom: 30, left: 30},
width = 300 - margin.left - margin.right,
height = 550 - margin.top - margin.bottom;
var parseYear = d3.time.format("%Y").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(2)
var yAxis = d3.svg.axis().scale(y)
.orient("right").ticks(4)
var valueline = d3.svg.line()
// .interpolate("basis")
.interpolate("step-before")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Value); });
var g = container
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() { return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() { return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
var voronoi = d3.geom.voronoi()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Value); })
.clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);
d3.csv("../../data/container_data.csv", function(error,data){
if (error) throw error;
data.forEach(function(d) {
d.Year = parseYear(d.Year);
d.Value = +d.Value;
});
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain([0, d3.max(data, function(d) { return d.Value; })]);
g.append("g")
.attr("class", "xgrid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
)
g.append("g")
.attr("class", "ygrid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.ticks(5)
.tickFormat(d3.format("s"))
)
g.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
g.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("y", 80)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Tons");
// Nest the entries by port name
var dataNest = d3.nest()
.key(function(d){return d["U.S. Custom Ports"]})
.entries(data);
g.append("rect")
.attr("x", 110)
.attr("y", 0)
.attr("width", "5%")
.attr("height", height)
.attr("class","recession")
dataNest
.forEach(function(d) {
g.append("path")
.attr("class", "line")
.attr("d", valueline(d.values))
// .attr("class",d.key, "line")
});
var focus = g.append("g")
.attr("class", "focus")
.attr("transform", "translate(-100,-100)");
focus.append("circle")
.attr("r", 4);
var voronoiGroup = g.append("g")
.attr("class", "voronoi");
voronoiGroup.selectAll("path")
.data(voronoi(dataNest))
.enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; })
})
}
drawMultiLine();
【问题讨论】：
标签： javascript d3.js