D3.js 如何使工具提示在D3分组条形图中显示金额?
我有5年的分组条形图数据,其中包括每年两个变量。当我将鼠标移到每个条上时,我希望它显示该条的特定值。但我不知道如何在我的代码底部设置工具提示的样式,以便在我将鼠标悬停在工具栏上时显示CSV中的实际数量 我希望我的CSV中的具体美元金额显示在我下面写的“此处金额”的位置。我能够在文本中显示美元符号,只是不从我的CSV中提取任何数据D3.js 如何使工具提示在D3分组条形图中显示金额?,d3.js,D3.js,我有5年的分组条形图数据,其中包括每年两个变量。当我将鼠标移到每个条上时,我希望它显示该条的特定值。但我不知道如何在我的代码底部设置工具提示的样式,以便在我将鼠标悬停在工具栏上时显示CSV中的实际数量 我希望我的CSV中的具体美元金额显示在我下面写的“此处金额”的位置。我能够在文本中显示美元符号,只是不从我的CSV中提取任何数据 var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 600 - margi
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#7b6888"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select(".chart").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 + ")");
$(document).ready(function() {
});
d3.csv("data/data.csv", function(error, data) {
var restAmt = d3.keys(data[0]).filter(function(key) { return key !== "year"; });
data.forEach(function(d) {
d.totalrest = restAmt.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.year; }));
x1.domain(restAmt).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.totalrest, function(d) { return d.value; }); })]);
var year = svg.selectAll(".year")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.year) + ",0)"; });
//draw X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//draw Y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Millions of Dollars");
year.selectAll("rest")
.data(function(d) { return d.totalrest; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); })
.on("mouseover", function(){return tooltip.style("visibility", "visible"); })
.on("mousemove", function(){return tooltip.style("top", (event.pageY-120)+"px").style("left",(event.pageX-120)+"px"); })
.on("mouseout", function(){return tooltip.style("visibility", "hidden");} )
var tooltip = d3.select(".chart")
.append("g")
.style("position", "absolute")
.style("z-index", "0")
.style("visibility", "hidden")
.text(function(){
return '$'+"amount here"
})
首先,看看您是否可以创建一个。我无法让你运行代码,所以我在这里猜测 不过,只要看一下,当您在工具提示上设置文本时,就可以查看数据是否已绑定,以便您可以将其传入
.text(function(d){
return '$'+d // or d.whatever
})
如果失败,您应该能够使用上面的.on
使用相同的技巧,并将数据传递给创建工具提示的函数
话虽如此,我感觉到你可能正在隐藏和显示每一个工具提示。如果是这种情况,并且数据绑定到工具提示,则可以创建一个工具提示函数,该函数接受
indx
,然后调用.style(“可见性”,函数(d,i){return i==indx?null:“hidden”)
这将仅取消隐藏indx
的工具提示。您可以在执行开始时使用-1
运行该函数以隐藏所有工具提示。或者,在需要时创建工具提示,而不是切换其可见性。此处仅猜测csv中的“金额”字段称为“金额”,使用d.amount作为以下示例:
您可以在“mouseover”事件中添加参数d,并将amout值作为html元素绑定到tooltip元素中:
var div = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
year.selectAll("rest")
...
.on('mouseover', function(d) {
div.transition()
.duration(200)
.style('opacity', .9);
div.html('<h3>' + d.amount + '</h3>' + '<p>' + d.amount + '</p>')
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY - 28) + 'px');
})
var div=d3。选择('body')。追加('div'))
.attr('类','工具提示')
.style('opacity',0);
年份。选择全部(“剩余”)
...
.on('mouseover',函数(d){
过渡部()
.持续时间(200)
.style('opacity',.9);
div.html(''+d.amount+''+''+d.amount+''))
.style('left',(d3.event.pageX)+'px')
.style('top',(d3.event.pageY-28)+'px');
})