D3图例未更新 [英] D3 Legend not updating
本文介绍了D3图例未更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
希望您能在这里指出我的错误...
hoping you can help point out my mistake here...
我无法获得图例的第二行来更新直方图的鼠标悬停:
I can't get the second row of the legend to update on mouseover of the histogram:
我不相信这是选择器，因为您可以毫无问题地添加id属性，并且在console.log()上数据似乎可以正常通过....有点困惑.
I don't believe it's the selector because you can add an id attribute to both no problem, and the data seems to be coming through ok on a console.log() ...little bit baffled.
http://jsfiddle.net/2sgLjbvu/3/
var data = [
{Supplier:"Supplier A",val: {WIP:"500",Conv:"400"}},
{Supplier:"Supplier B",val: {WIP:"1400",Conv:"400"}},
{Supplier:"Supplier C",val: {WIP:"300",Conv:"800"}},
{Supplier:"Supplier D",val: {WIP:"1000",Conv:"200"}}
];
dashboard("#chartArea",data);
function dashboard(id,fData){
var barColor='steelblue';
function segColor(c){return {WIP:"#807dba",Conv:"#41ab5d"}[c];}
//compute total for each supplier
fData.forEach(function (d){d.total = parseFloat(d.val.WIP) + parseFloat(d.val.Conv);});
//func to handle histogram
function histoGram(fD){
//Dimensions
var hG={}, hGDim = {t:60,r:0,b:30,l:0};
hGDim.w = 500 - hGDim.l - hGDim.r,
hGDim.h = 300 - hGDim.t - hGDim.b;
//create svg for histogram.
var hGsvg = d3.select(id).append("svg")
.attr("width",hGDim.w +hGDim.l + hGDim.r)
.attr("height",hGDim.h + hGDim.t + hGDim.b)
.append("g")
.attr("transform","translate(" + hGDim.l + "," + hGDim.t + ")");
//create function for x-axis mapping
var x = d3.scale.ordinal().rangeRoundBands([0,hGDim.w],0.1)
.domain(fD.map(function(d){return d[0];}));
//Add x-axis to histogram
hGsvg.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + hGDim.h + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
//create function for y-axis mapping
var y = d3.scale.linear().range([hGDim.h,0])
.domain([0,d3.max(fD,function(d){
return d[1];
})]);
//create bars for the histogram to contain recs and val labels
var bars = hGsvg.selectAll(".bar")
.data(fD)
.enter()
.append("g")
.attr("class","bar");
//create the recs
bars.append("rect")
.attr("x",function(d){return x(d[0]);})
.attr("y",function(d){return y(d[1]);})
.attr("width",x.rangeBand())
.attr("height",function(d){return hGDim.h - y(d[1]);})
.attr("fill",barColor)
.on("mouseover",mouseover) //defined below
.on("mouseout",mouseout); //defined below
function mouseover(d){
//filter for selected supplier
var st = fData.filter(function(s){return s.Supplier==d[0];})[0],
nD = d3.keys(st.val).map(function(s){return {type:s,val:st.val[s]};});
pC.update(nD);
leg.update(nD);
}
function mouseout(d){
//reset the pie-chart and legend
pC.update(tF);
leg.update(tF);
}
//func to update the bars - this will be used by the pie-chart
hG.update = function(nD,color){
//update domain of the y-axis to reflect change in supp
y.domain([0,d3.max(nD,function(d){return d[1];})]);
//attach the new data to the bars
var bars = hGsvg.selectAll(".bar")
.data(nD);
//transition of the height and color of rectangles
bars.select("rect")
.transition()
.duration(500)
.attr("y",function(d){return y(d[1]);})
.attr("height",function(d){return hGDim.h - y(d[1]);})
.attr("fill",color);
//transition the frequency labels loc
bars.select("text")
.transition()
.duration(500)
.text(function(d){ return d3.format(",")(d[1]);})
.attr("y",function(d){return y(d[1])-5;});
};
return hG;
}
function pieChart(pD){
var pC={},pieDim={w:250,h:250};
pieDim.r = Math.min(pieDim.w,pieDim.h)/2;
//create svg for pie chart
var piesvg = d3.select(id).append("svg")
.attr("width",pieDim.w)
.attr("height",pieDim.h)
.append("g")
.attr("transform","translate(" + pieDim.w/2 + "," + pieDim.h/2 + ")");
//create func to draw arcs of the slices
var arc = d3.svg.arc()
.outerRadius(pieDim.r-10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d){return d.val;});
//Draw the pie slices
piesvg.selectAll("path")
.data(pie(pD))
.enter()
.append("path")
.attr("d",arc)
.each(function(d){this._current=d;})
.style("fill",function(d){return segColor(d.data.type);})
.on("mouseover",mouseover)
.on("mouseout",mouseout);
//create func to update pie-chart, this will be used by the histogram
pC.update = function(nD){
piesvg.selectAll("path")
.data(pie(nD))
.transition()
.duration(500)
.attrTween("d",arcTween);
};
//Utility func to be called on mouseover a pie slice
function mouseover(d){
//call the update function of the histogram with new data
hG.update(fData.map(function(v){
return[v.Supplier,v.val[d.data.type]];}),segColor(d.data.type));
}
//Utility func to be called on mouseout of a pie slice
function mouseout(d){
//call the update func of histogram with all data
hG.update(fData.map(function(v){
return[v.Supplier,v.total];}),barColor);
}
//Animate the pie-slice requiring a custom function which specifies
//how the intermeidate paths should be draw
function arcTween(a){
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t){return arc(i(t));};
}
return pC;
}
//func to handle legend
function legend(lD){
leg={};
//create table for legend
var lgend = d3.select(id)
.append("table")
.attr("class","legend");
//create one row per segment
var tr = lgend.append("tbody")
.selectAll("tr")
.data(lD)
.enter()
.append("tr");
//create the first column for each segment
tr.append("td")
.append("svg")
.attr("width","16")
.attr("height","16")
.append("rect")
.attr("width","16")
.attr("height","16")
.attr("fill",function(d){return segColor(d.type);});
//create the second column for each segment
tr.append("td")
.text(function(d){return d.type;});
//create the third col
tr.append("td")
.attr("class","legendFreq")
.text(function(d){return d3.format(",")(d.val);});
//create the perc col
tr.append("tr")
.attr("class","legendPerc")
.text(function(d){return getLegend(d,lD);});
//utility func to be used to update the legend
leg.update = function(nD){
var l = lgend.select("tbody")
.selectAll("tr")
.data(nD);
l.select(".legendFreq")
.text(function(d){return d3.format(",")(d.val);});
l.select(".legendPerc")
.text(function(d){return getLegend(d,nD);});
};
function getLegend(d,aD){//utility func to compute perc
return d3.format("%")(d.val/d3.sum(aD.map(function(v){return v.val;})));
}
return leg;
}
var sF = fData.map(function(d){
return [d.Supplier,d.total];
});
var tF = ['WIP','Conv'].map(function(d){
return {type:d,val:d3.sum(fData.map(function(t){return t.val[d];}))};
});
var hG = histoGram(sF),
pC=pieChart(tF),
leg = legend(tF);
}
推荐答案
知道了...
//create the perc col
tr.append("tr")
.attr("class","legendPerc")
.text(function(d){return getLegend(d,lD);});
应该是...
//create the perc col
tr.append("td")
.attr("class","legendPerc")
.text(function(d){return getLegend(d,lD);});
这篇关于D3图例未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
