[英]Always Show Tooltip Regardless of Mouseover
我是JS和HTML的新手,所以我很难实施此更改:
我希望堆叠条形图的值始终显示,而不是依赖于鼠标悬停。
我将如何更改下面的代码来实现这一目标?
var margin = {top: 20, right: 160, bottom: 35, left: 30}; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("body") .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 in strings like it would be if imported from a csv */ var data = [ { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" }, { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "4" }, { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" }, { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" }, { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" }, { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" }, { year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" }, { year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" }, { year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" }, { year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" }, { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" }, ]; var parse = d3.time.format("%Y").parse; // Transpose the data into layers var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) { return data.map(function(d) { return {x: parse(d.year), y: +d[fruit]}; }); })); // Set x, y and colors var x = d3.scale.ordinal() .domain(dataset[0].map(function(d) { return dx; })) .rangeRoundBands([10, width-10], 0.02); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + dy; }); })]) .range([height, 0]); var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"]; // Define and draw axes var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width, 0, 0) .tickFormat( function(d) { return d } ); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%Y")); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Create groups for each series, rects for each segment var groups = svg.selectAll("g.cost") .data(dataset) .enter().append("g") .attr("class", "cost") .style("fill", function(d, i) { return colors[i]; }); var rect = groups.selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", function(d) { return x(dx); }) .attr("y", function(d) { return y(d.y0 + dy); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + dy); }) .attr("width", x.rangeBand()) .on("mouseover", function() { tooltip.style("display", null); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .on("mousemove", function(d) { var xPosition = d3.mouse(this)[0] - 15; var yPosition = d3.mouse(this)[1] - 25; tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); tooltip.select("text").text(dy); }); // Draw legend var legend = svg.selectAll(".legend") .data(colors) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d, i) {return colors.slice().reverse()[i];}); legend.append("text") .attr("x", width + 5) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d, i) { switch (i) { case 0: return "Anjou pears"; case 1: return "Naval oranges"; case 2: return "McIntosh apples"; case 3: return "Red Delicious apples"; } }); // Prep the tooltip bits, initial display is hidden var tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("width", 30) .attr("height", 20) .attr("fill", "white") .style("opacity", 0.5); tooltip.append("text") .attr("x", 15) .attr("dy", "1.2em") .style("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold");
svg { font: 10px sans-serif; shape-rendering: crispEdges; } .axis path, .axis line { fill: none; stroke: #000; } path.domain { stroke: none; } .y .tick line { stroke: #ddd; }
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
我想您需要为每个矩形结果添加标签(工具提示) 。 经过很少的计算,我得到了:
http://jsfiddle.net/5o4jefap/87/
这是不附带鼠标事件的修改后的部分:
var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("g")
.attr('class', 'tooltip')
.append('rect')
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
groups.selectAll('.tooltip')
.append("rect")
.attr('width', 15)
.attr('height', 15)
.attr('fill', 'white')
.style("opacity", 0.5)
.attr('y', function(d) {
var rectY = y(d.y0 + d.y),
rectHalfHeight = ((y(d.y0) - y(d.y0 + d.y)) / 2),
tooltipHalfHeight = (this.getBBox().height / 2);
return rectY + rectHalfHeight - tooltipHalfHeight;
})
.attr("x", function(d) {
var rectX = x(d.x),
rectHalfWidth = (x.rangeBand() / 2),
tooltipHalfWidth = (this.getBBox().width / 2);
return rectX + rectHalfWidth - tooltipHalfWidth;
})
groups.selectAll('.tooltip')
.append('text')
.attr("x", function(d) {
var rectX = x(d.x),
rectHalfWidth = (x.rangeBand() / 2),
tooltipHalfWidth = (this.getBBox().width / 2);
return rectX + rectHalfWidth - tooltipHalfWidth;
})
.attr("y", function(d) {
var rectY = y(d.y0 + d.y),
rectHalfHeight = ((y(d.y0) - y(d.y0 + d.y)) / 2),
tooltipHalfHeight = (this.getBBox().height / 2);
return rectY + rectHalfHeight - tooltipHalfHeight;
})
.attr("dy", '5px')
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold")
.text(function (data) {
return data.y;
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.