C
Use area(s) instead of line(s) to delineate the completed line. I don't really know what the red lines are, use the svg element. line I don't know. In addition, in order to show correctly tooltip, you will have to determine the position of the cadet and determine which rectangle under it and be refreshed. It's necessary because the area chart overlaps bar chart.var dataArray = [
['category A', 5, 200],
['category B', 10, 100],
['Some text ...long C', 19, 30],
['D', 4, 50],
['category Q', 5, 20],
['category R', 10, 10],
['Some text ...long S', 19, 350],
['T', 40, 500]
];
plot_bar_line_graph(dataArray, "#bar_line_chart", 600, 300, 'yLabel', 'yLabel2');
// A function to plot D3 line chart - Pass in the data array and the html objectId
// where the chart needs to be.
// Also pass the width, height for the plot
function plot_bar_line_graph(dataArray, htmlObjectId, width, height, yLabel, yLabel2) {
// set margins for a nice looking bar chart
var margin = {
top: 30,
right: 50,
bottom: 50,
left: 50
},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Determine max data to set the axis limits
var maxData = Math.max.apply(Math, dataArray.map(function(d) {
return d[1];
}));
var minData = Math.min.apply(Math, dataArray.map(function(d) {
return d[1];
}));
var maxData2 = Math.max.apply(Math, dataArray.map(function(d) {
return d[2];
}));
var minData2 = Math.min.apply(Math, dataArray.map(function(d) {
return d[2];
}));
// Define linear scale for y-axis
// Note that the height range is reversed.
var heightScale = d3.scaleLinear()
.range([height, margin.top])
// change 0 to minData is required
.domain([0, maxData]);
// height scale for bar graphs on right
var heightScale2 = d3.scaleLinear()
.range([height, margin.top])
.domain([0, maxData2]);
// define scale for categorical x-axis
// NOTE: The range is from margin.left and not 0.
var widthScale = d3.scaleBand()
.range([margin.left, width])
.padding(0.4)
.domain(dataArray.map(function(d) {
return d[0];
}));
// define x,y-axes scale and align them bottom and left
var yaxis = d3.axisLeft()
.scale(heightScale)
.tickSize(10);
var yaxis2 = d3.axisRight()
.scale(heightScale2)
.tickSize(10);
var xaxis = d3.axisBottom()
.scale(widthScale)
.tickSize(10);
// Define the canvas which will hold the chart
var canvas = d3.select(htmlObjectId)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// Define the line and bind it to the data
var line = d3.area()
.x(function(d) {
return widthScale(d[0]) + widthScale.bandwidth() / 2;
})
.y1(function(d) {
return heightScale(d[1]);
})
.curve(d3.curveLinear);
// add bars to the canvas
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("class", "bar")
.attr("y", function(d) {
return heightScale2(d[2]);
})
.attr("x", function(d) {
return widthScale(d[0]);
})
.attr("height", function(d) {
return height - heightScale2(d[2]);
})
.attr("width", widthScale.bandwidth())
.attr("fill", "DodgerBlue")
.style("opacity", 0.7)
.on("mouseover", function(d) {
d3.select(this).attr("fill", "orangered");
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("скорость " + d[1] + ",<br/> интенсивность " + d[2])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr("fill", "DodgerBlue");
div.transition()
.duration(200)
.style("opacity", 1);
})
.on("click", function(d) {
console.log(d);
});
line.y0(height);
// Draw line connecting the data points
// Do not fill!
canvas.append("path")
.data([dataArray])
.attr("fill", "#1F521F")
.attr('fill-opacity', 0.6)
.attr("stroke", "#00FF00")
//.style("opacity", 0.6)
//.attr("stroke-linejoin", "round")
//.attr("stroke-linecap", "round")
.attr("stroke-width", 2)
.attr("d", line);
// Define the div for the tooltip
// The styling and locations need css definitions.
var div = d3.select(htmlObjectId)
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Add dots for data points.
// Also includes tooltip
canvas.selectAll("dot")
.data(dataArray)
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return widthScale(d[0]) + widthScale.bandwidth() / 2;
})
.attr("cy", function(d) {
return heightScale(d[1]);
})
.attr("fill", "white")
.attr('stroke', '#00FF00')
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("скорость " + d[1] + ",<br/> интенсивность " + d[2])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function() {
div.transition()
.duration(200)
.style("opacity", 0);
});
//оси координат
// Add x-axis to the bar chart canvas низ
canvas.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(xaxis)
.selectAll("text")
.attr("text-anchor", "end")
.attr("dx", "-14")
.attr("dy", "-6")
.attr("transform", "rotate(-75)");
// add y-axis to the bar chart canvas лево
canvas.append("g")
.attr("transform", "translate(" + margin.left + ", 0)")
.attr("class", "axis y")
.call(yaxis)
.append("text")
//.attr("transform", "rotate(-90)")
.attr("y", 0)
.attr("x", 0)
.attr("dy", "1.2em")
.attr("dx", "-5em")
.style("text-anchor", "end")
.text(yLabel)
.attr("fill", "Green");;
// add y-axis2 to the bar chart canvas право
canvas.append("g")
.call(yaxis2)
.attr("transform", "translate(" + width + ", 0)")
.attr("class", "axis y2")
.append("text")
// .attr("transform", "rotate(-90)")
.attr("y", 0)
.attr("x", 0)
.attr("dy", "-0.2em")
.attr("dx", "-5em")
.style("text-anchor", "end")
.text(yLabel2)
.attr("fill", "DodgerBlue");;
}div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 30px;
padding: 2px;
font: 12px sans-serif;
color: white;
background: black;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
body {
font-family: 'open sans';
font-size: 10px;
text-align: center;
background: black;
}
.axis text {
fill: white;
}
.axis line {
stroke: white;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>D3 Bar chart</title>
</head>
<body>
<div id="bar_line_chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>
</html>
