Javascript 在堆叠条形图中使用图例以及工具提示d3 js
我已经在这个链接的帮助下完成了堆叠条形图,但是我想定制我现有的堆叠条形图代码,我必须在其中添加d3.legend以及工具提示 现在我已经完成了直到工具提示,但有标签问题,因为我必须从我的数组数据中给出这样的值“A:100”,如下所示Javascript 在堆叠条形图中使用图例以及工具提示d3 js,javascript,d3.js,Javascript,D3.js,我已经在这个链接的帮助下完成了堆叠条形图,但是我想定制我现有的堆叠条形图代码,我必须在其中添加d3.legend以及工具提示 现在我已经完成了直到工具提示,但有标签问题,因为我必须从我的数组数据中给出这样的值“A:100”,如下所示 var data = [ {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"}, {month: "5/1854",total:"200" ,A:"80", B:"70",
var data = [
{month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
{month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
{month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"},
{month: "7/1854",total:"400" ,A: "200", B:"100", C:"100"},
{month: "8/1854",total:"500" ,A:"100", B:"200", C:"200"},
{month: "9/1854",total:"600" ,A:"100", B:"200", C:"300"},
{month: "10/1854",total:"700" ,A: "400", B:"100", C:"200"},
{month: "11/1854",total:"800" ,A:"500", B:"200", C:"100"},
{month: "12/1854",total:"900" ,A:"100", B:"400", C:"500"},
{month: "13/1854",total:"1000" ,A:"500", B:"0", C:"500"}
];
关于d3.legend,我没有找到任何合适的例子来说明如何在我现有的代码中使用它,但我必须这样展示
这是我的完整工作代码
var xData = ["A", "B", "C"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .35);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.category20();
//console.info(color(0));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#pie").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 + ")");
data.forEach(function(d) {
d.month = parseDate(d.month);
xData.forEach(function(c) {
d[c] = +d[c];
});
})
var dataIntermediate = xData.map(function (c) {
return data.map(function (d) {
return {x: d.month, y: d[c]};
});
});
var dataStackLayout = d3.layout.stack()(dataIntermediate);
x.domain(dataStackLayout[0].map(function (d) {
return d.x;
}));
y.domain([0,
d3.max(data, function(d) { return d.total; })
])
.nice();
var layer = svg.selectAll(".stack")
.data(dataStackLayout)
.enter().append("g")
.attr("class", "stack")
.style("fill", function (d, i) {
console.info(i, color(i));
return color(i);
});
layer.selectAll("rect")
.data(function (d) {
return d;
})
.enter().append("rect")
.attr("x", function (d) {
console.info("dx", d.x,x(d.x), x.rangeBand());
return x(d.x);
})
.attr("y", function (d) {
return y(d.y + d.y0);
})
.attr("height", function (d) {
// console.info(d.y0, d.y, y(d.y0), y(d.y))
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() -1)
.on("mouseover", function(d){
var delta = d.y1 - d.y0;
var xPos = parseFloat(d3.select(this).attr("x"));
var yPos = parseFloat(d3.select(this).attr("y"));
var height = parseFloat(d3.select(this).attr("height"))
d3.select(this).attr("stroke","blue").attr("stroke-width",0.8);
svg.append("text")
.attr("x",xPos)
.attr("y",yPos +height/2)
.attr("class","tooltip")
.text(d +": "+ delta);
})
.on("mouseout",function(){
svg.select(".tooltip").remove();
d3.select(this).attr("stroke","pink").attr("stroke-width",0.2);
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
请为我提供一些关于我的图表的有用建议。任何帮助都应该感谢。让我们为您提到的内容添加一个图例和工具提示(我无法使用您的代码,因为它不完整)。看看下面隐藏片段中的演示(我将数据加载重写为
d3.tsv.parse
,以简化示例)
首先,让我们将底部边距增加到适合svg的图例:
var margin = {top: 20, right: 50, bottom: 130, left: 20};
以这种方式添加图例(请注意注释):
添加工具提示的最快方法是使用库。使用npm
或script
标记将其添加到项目中
按以下方式定义工具提示:
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(data, cause) {
return "<div class=\"tooltip\">" + cause + ":" + data.y + "</div>";
})
svg.call(tip);
注意:它适用于d3v3,如果您使用d3v4,您将被迫稍微重写mouseover
handler函数
var原因=[“伤口”、“其他”、“疾病”];
var parseDate=d3.time.format(“%m/%Y”).parse;
var margin={顶部:20,右侧:50,底部:130,左侧:20},
宽度=960-margin.left-margin.right,
高度=500-margin.top-margin.bottom;
var x=d3.scale.ordinal()
.rangeRoundBands([0,宽度]);
变量y=d3.scale.linear()
.rangeRound([高度,0]);
var z=d3.scale.category10();
var xAxis=d3.svg.axis()
.比例(x)
.orient(“底部”)
.tickFormat(d3.time.format(“%b”);
var yAxis=d3.svg.axis()
.比例(y)
.东方(“权利”);
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
var dataAsString=`日期总疾病伤口数其他
4/1854 8571 1 0 5
5/1854 23333 12 0 9
6/1854 28333 11 0 6
7/1854 28772 359 0 23
8/1854 30246 828 1 30
9/1854 30290 788 81 70
10/1854 30643 503 132 128
11/1854 29736 844 287 106
12/1854 32779 1725 114 131
1/1855 32393 2761 83 324
2/1855 30919 2120 42 361
3/1855 30107 1205 32 172
4/1855 32252 477 48 57
5/1855 35473 508 49 37
6/1855 38863 802 209 31
7/1855 42647 382 134 33
8/1855 44614 483 164 25
9/1855 47751 189 276 20
10/1855 46852 128 53 18
11/1855 37853 178 33 32
12/1855 43217 91 18 28
1/1856 44212 42 2 48
2/1856 43485 24 0 19
3/1856 46140 15 0 35`;
var tip=d3.tip()
.attr('class','d3 tip')
.偏移量([-10,0])
.html(函数(数据、原因){
返回“+cause+”:“+data.y+”;
})
svg.call(tip);
var crimea=d3.tsv.parse(数据字符串,函数(项){
返回{
日期:日期(项目日期),
总计:+item.total,
疾病:+item.disease,
伤口:+物品。伤口,
其他:+item.other
};
});
var layers=d3.layout.stack(){
返回克里米亚地图(函数(d){
返回{x:d.date,y:d[c]};
});
}));
x、 域(层[0].map(函数(d){returnd.x;}));
y、 域([0,d3.max(layers[layers.length-1],函数(d){returnd.y0+d.y;})]).nice();
var layer=svg.selectAll(“.layer”)
.数据(图层)
.enter().append(“g”)
.attr(“类”、“层”)
.style(“fill”,函数(d,i){返回z(i);});
图层。选择全部(“rect”)
.data(函数(d){return d;})
.enter().append(“rect”)
.attr(“x”,函数(d){返回x(d.x);})
.attr(“y”,函数(d){返回y(d.y+d.y0);})
.attr(“高度”,函数(d){返回y(d.y0)-y(d.y+d.y0);})
.attr(“宽度”,x.rangeBand()-1)
.on('mouseover',函数(d,i,j){tip.show(d,causes[causes.length-1-j]);}
.on('mouseout',tip.hide);
svg.append(“g”)
.attr(“类”、“轴--x”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis);
svg.append(“g”)
.attr(“类”、“轴--y”)
.attr(“变换”、“平移”(+width+),0)
.呼叫(yAxis);
var legend=svg.append(“g”)
.attr(“变换”、“平移(0)”+(高度+25)+>)
.selectAll(“图例”)
.data(原因.reverse())
.enter().append(“g”)
.attr(“类”、“图例”)
.attr(“transform”,函数(d,i){return“translate(0,+i*20+”);});
图例。追加(“rect”)
.attr(“x”,宽度-18)
.attr(“宽度”,18)
.attr(“高度”,18)
.style(“fill”,函数(d,i){returnz(causes.length-1-i);});
图例。追加(“文本”)
.attr(“x”,宽度-24)
.attr(“y”,9)
.attr(“dy”,“.35em”)
.style(“文本锚定”、“结束”)
.text(函数(d){return d;});
功能类型(d){
d、 日期=解析日期(d.date);
forEach(函数(c){d[c]=+d[c];});
返回d;
}
.axis文本{
字体:10px无衬线;
}
.传奇{
字体系列:“Helvetica Neue”,Helvetica,Arial,无衬线;
字体大小:60%;
}
.轴线,
.轴路径{
填充:无;
行程:#000;
形状渲染:边缘清晰;
}
.轴--x路径{
显示:无;
}
.工具提示{
背景颜色:浅蓝色;
边界半径:5px;
填充:6px;
}
我已经成功地将您的代码用于图例,但您能告诉我关于工具提示的想法吗?在工具提示中,我必须显示“A:100”之类的标签,或者您可以自己实现提示。请参阅示例-我使用了您的代码,但在代码“return”“+cause+”:“+data.y+”;”的这一行出现了“tooltip is undefind”错误如果删除类=\\\\\\\\\\\\\\
,会发生什么情况?当我删除工具提示类时,该值不会出现在UI上,并在日志中出现错误,但在我将行更改为“return”“+cause+”:“+”“+data.y+””之后,它将成功运行
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(data, cause) {
return "<div class=\"tooltip\">" + cause + ":" + data.y + "</div>";
})
svg.call(tip);
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1)
.on('mouseover', function(d,i,j) { tip.show(d, causes[causes.length - 1 - j]); })
.on('mouseout', tip.hide);