0
jsチャートチャートにツールチップを表示したい。私はそれを追加する方法を知りません。誰でも自分のチャートにツールチップを追加する方法を教えてください。csvファイルを使用してd3グループチャートにツールチップを追加する方法
ここに私は私のコードを追加します：ここに
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="d3.min.js"></script>
<script src="d3-legend.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
}
.axis .label {
font-size: 20pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
}
rect:hover {
fill: #3EBCE6;
}
rect {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
</head>
<body>
<script>
var outerWidth = 1200;
var outerHeight = 720;
var margin = { left: 90, top: 30, right: 30, bottom: 40 };
var barPadding = 0.2;
var xColumn = "Building";
var yColumn = "Total";
var colorColumn = "Type";
var layerColumn = colorColumn;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
debugger;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth+500)
.attr("height", outerHeight+150);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate("+(outerWidth)+", 0)");
var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.ticks(7)
.tickFormat(d3.format("s"))
.outerTickSize(0);
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(2)
.shapeWidth(15)
.shapeHeight(15)
.labelOffset(4);
function render(data){
var nested = d3.nest()
.key(function (d){ return d[layerColumn]; })
.entries(data)
var stack = d3.layout.stack()
.y(function (d){ return d[yColumn]; })
.values(function (d){ return d.values; });
var layers = stack(nested);
xScale.domain(layers[0].values.map(function (d){
return d[xColumn];
}));
yScale.domain([
0,
d3.max(layers, function (layer){
return d3.max(layer.values, function (d){
return d.y;
});
})
]);
colorScale.domain(layers.map(function (layer){
return layer.key;
}));
xAxisG.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.5em")
.attr("dy", "-.0em")
.attr("transform", function(d) {
return "rotate(-45)"
});
yAxisG.call(yAxis);
var layers = g.selectAll(".layer").data(layers);
layers.enter().append("g").attr("class", "layer");
layers.exit().remove();
layers.style("fill", function (d){
return colorScale(d.key);
});
var bars = layers.selectAll("rect").data(function (d){
return d.values;
});
var barWidth = xScale.rangeBand()/colorScale.domain().length;
bars.enter()
.append("rect")
bars.exit().remove();
bars
.attr("x", function (d, i, j){
return xScale(d[xColumn]) + barWidth * j;
})
.attr("y", function (d){ return yScale(d.y); })
.attr("width", barWidth)
.attr("height", function (d){ return innerHeight - yScale(d.y); })
.append("title")
.text(function(d) {
return d.VALUE;
});
colorLegendG.call(colorLegend);
}
function type(d){
d.Total = +d.Total;
return d;
}
d3.csv("D3.csv", type, render);
// Define the div for the tooltip
</script>
</body>
</html>
は私のcsvファイルは、私は私のD3 jsのコードやcsvファイルのコードの両方をアップロードしてい
Building,Type,Small,Medium,Large,Total
Building1,Food,68,38,40,146
Building1,Medicine,24,38,24,86
Building2,Food,31,24,40,95
Building2,Medicine,17,38,22,77
Building3,Food,24,24,22,70
Building3,Medicine,27,38,40,105
Building4,Food,23,38,24,85
Building4,Medicine,20,38,22,80
Building5,Food,17,24,40,81
Building5,Medicine,40,38,22,100
Building6,Food,68,38,40,146
Building6,Medicine,24,38,24,86
Building7,Food,31,24,40,95
Building7,Medicine,17,38,22,77
Building8,Food,24,24,22,70
Building8,Medicine,27,38,40,105
Building9,Food,23,38,24,85
Building9,Medicine,20,38,22,80
Building10,Food,17,24,40,81
Building10,Medicine,40,38,22,100
Building11,Food,17,24,40,81
Building11,Medicine,40,38,22,100
Building12,Food,68,38,40,146
Building12,Medicine,24,38,24,86
Building13,Food,31,24,40,95
Building13,Medicine,17,38,22,77
Building14,Food,24,24,22,70
Building14,Medicine,27,38,40,105
Building15,Food,23,38,24,85
Building15,Medicine,20,38,22,80
Building16,Food,17,24,40,81
Building16,Medicine,40,38,22,100
Building17,Food,17,24,40,81
Building17,Medicine,40,38,22,100
です。どのようにツールチップを追加するか教えてください。
Vinoth
ですが、このための小さな問題はツールチップがバーの上に表示されていることです。 –