サンプル
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar:hover {
fill: steelblue;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tooltip {
border: 1px solid #eee;
background-color: #fff;
padding: 8px 8px 0 8px;
border-radius: 3px;
}
path {
stroke: #00a0e9;
opacity : 0.95;
}
.line {
fill: none;
stroke: red;
stroke-width: 2px;
}
path {
stroke: #00a0e9;
opacity : 0.95;
}
path.linechart {
stroke-width : 2;
}
</style>
<body>
<script src="">https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
<script>
var dataset = [
{graphId: "001", y1Val: 15, y2Val: 120, graphColor: "aliceblue"},
{graphId: "002", y1Val: 3, y2Val: 67, graphColor: "lavender"},
{graphId: "003", y1Val: 22, y2Val: 45, graphColor: "lightsteelblue"},
{graphId: "004", y1Val: 9, y2Val: 98, graphColor: "lightslategray"},
{graphId: "005", y1Val: 19, y2Val: 13, graphColor: "slategray"},
{graphId: "006", y1Val: 15, y2Val: 35, graphColor: "steelblue"},
{graphId: "007", y1Val: 3, y2Val: 29, graphColor: "royalblue"},
{graphId: "008", y1Val: 22, y2Val: 76, graphColor: "midnightblue"},
{graphId: "009", y1Val: 9, y2Val: 89, graphColor: "navy"},
{graphId: "010", y1Val: 19, y2Val: 112, graphColor: "darkblue"},
];
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// *** 縦棒グラフ ********
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "");
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 + ")");
x.domain(dataset.map(function(d) { return d.graphId; }));
y.domain([0, d3.max(dataset, function(d) { return d.y1Val; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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("Y value");
var barChart = svg.selectAll(".bar")
.data(dataset)
.enter()
.append("rect")
.attr("class", "bar")
.attr("fill", function(d) { return d.graphColor; })
.attr("x", function(d) { return x(d.graphId); })
.attr("width", x.rangeBand());
// アニメーション
barChart.transition()
.delay(function (d, i) { return i * 100; })
.duration(200)
.attr("y", function(d) { return y(d.y1Val); })
.attr("height", function(d) { return height - y(d.y1Val); });
// ツールチップ
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
barChart
.on("mouseover", function(){
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(d){
return tooltip
.style("top", (d3.event.pageY - 10) + "px")
.style("left",(d3.event.pageX + 10) + "px")
.html("<span>" + d.graphId + " : " + d.y1Val + "</span>");
})
.on("mouseout", function(){
return tooltip.style("visibility", "hidden");
});
// *** 折れ線グラフ ********
var yScaleForLine = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d.y2Val; })])
.range([height, 0]);
var yAxisForLine = d3.svg.axis()
.scale(yScaleForLine)
.orient("right")
.ticks(4)
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x);
svg.append('g')
.attr("class", "y axis")
.attr("transform", "translate(" + width + "," + 0 + ")")
.call(yAxisForLine)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Y2 value");
var line = d3.svg.line()
.x(function(d) { return x(d.graphId); })
.y(function(d) { return yScaleForLine(d.y2Val); });
var path = svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 以降は、アニメーションのための設定
var totalLength = path.node().getTotalLength();
path.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1000) // アニメーション速度
.ease("linear")
.attr("stroke-dashoffset", 0);
</script>