1
私はマルチラインチャートを作成しましたが、私はより良いマウスの相互作用のためにボロノイを追加するのに苦労していました。正しい方向へ私を向けるどんな助けも大いに感謝されるでしょう。ここでd3 multiline voronoi not working
は私のデータです：
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();
おっとを、感謝のマークは、それが超便利です。私は簡単な質問が1つありますが、私はmouseover/mouseout関数を追加して線の色を変えようとしています.....しかし、これまでのところ私の行に対応するためにマウスオーバーを行う運がありません。私はかなり問題を引き起こしている私のd3の選択ですが、私はそれを修正する方法がわかりません。 – fabrice
@fabrice、上記のコードスニペットの更新をご覧ください。 – Mark
もう一度ご迷惑をおかけして申し訳ありません。私は上記のスニペットを疲れさせましたが、仕事にホバーカラーをつける運がまだありませんでした。私はとても混乱しています。私はbl.ocksに自分のコードをアップロードしました。あなたが私を適切な方向に向けることができれば、とても役に立ちます。http://blockbuilder.org/jeremycflin/a304ed19652fee4cfbe58bc9c0afa2ec – fabrice