score:2
Accepted answer
first, get rid of that data.foreach
: why do you want to paint everything 3 times?
after that, define your line generator:
var line = d3.line()
.x(function(d){ return x(d.letter) + x.bandwidth()/2})
.y(function(d){ return y(d.frequency)})
.curve(d3.curvecardinal);;
here, x.bandwidth()/2
will put the line in the middle of the top of each bar. i'm using d3.curvecardinal
, but you have other options for the curve.
then, append the line:
g.append("path")
.datum(data)
.attr("d", line);
here is the demo:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
//our basic data
var data = [
{frequency:0.08, letter:"a"},
{frequency:0.11,letter:"b"},
{frequency:0.13,letter:"c"}
];
var svg = d3.select("svg");
var margin = {top: 40, bottom: 40, left: 40, right: 40};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleband().rangeround([0, width]).padding(0.6);
var y = d3.scalelinear().rangeround([height, 0]);
//defining our main g in svg
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//looping for data bars
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
var line = d3.line()
.x(function(d){ return x(d.letter) + x.bandwidth()/2})
.y(function(d){ return y(d.frequency)})
.curve(d3.curvecardinal);
g
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisbottom(x));
g
.append("g")
.call(d3.axisleft(y).ticks(10, "%"));
g
.selectall(".bar")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });
g.append("path")
.datum(data)
.attr("d", line)
.attr("stroke", "red")
.attr("fill", "none");
</script>
Source: stackoverflow.com
Related Query
- Simple line chart joining top of histograms
- D3 - adding grid to simple line chart
- Draw D3 Simple Line chart With an Array
- Simple D3 line chart example
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- Simple Line chart from AngularJS array
- d3 line chart cutting off at the top
- simple multi line chart with D3
- d3js gantt chart with date/time scale at the top and current day blue line
- Getting the scale right for a line chart for a simple CSV in D3 v4
- Simple D3.js line chart with data that are values collect every hours
- Simple Real Time D3 Line chart
- d3 v5 plotting simple line chart and mapping/casting to numbers using promise
- Top line padding with Nvd3 chart
- Draw line chart on top of area chart
- D3 V4 - Trying to Chart a Simple line Graph
- How to add a line at top of stacked bar chart with d3.js?
- d3.js creating a simple line chart with array of DateTime and int
- Simple line chart
- d3js - How to update an existing svg path in a simple d3 line chart with new data flowing through?
- D3.js Draw vertical line after every 2 bar and draw x-axis label on the top of bar chart
- Creating a simple line chart from a CSV using D3.js
- How to disable some streams by default in a nvd3 Simple Line Chart?
- nvd3 line chart with string values on x-axis
- Draggable line chart in R/Shiny
- D3.JS time-series line chart with real-time data, panning and zooming
- d3 Line Chart Filling at Arbitrary Line
- Multiseries line chart with mouseover tooltip
- D3 line chart axis text labels in multi line
- NVD3 - line chart NaN on safari using latest versions
More Query from same tag
- text not showing in forcelayout d3js but present in view
- d3.js - prevent "clustering" with parent / other groups in force-directed graph
- D3 line graph issue
- d3.js - CircleLayout
- How to calculate equidistant points within concentric arcs/closed paths using d3.js
- Queue asynchronous operation which involves promises
- D3.js pattern not working with arc or donut graph
- Reference Error: d3 is not defined. Script is not being referenced
- Line charts in d3.js using d3.chart.js
- geochart in d3.js
- D3 js bar chart pan
- How to display D3.js charts in Apple Watch?
- How to search for a certain node based on the name?
- D3 interactive graph - Update graph with new data from server
- d3 lines between dots not working
- How can I access and change variable in concatenated text of tooltip using D3/javascript?
- Stepline Chart with D3.js with individual lines
- Numbering the "Number of child's" on a parent node in collapsible tree chart in D3
- Why does d3.select() return array of array?
- D3.js d3.line giving unexpected results when taking values from an input
- How do I add my own data to a responsive US states map?
- MySQL query correlating dayofweek and hour of sent messages
- Is there a way to reduce lagging of a guideline that follows the mouse pointer?
- d3 - attaching data to an axis for rescaling
- d3 connecting rectangles from different groups by a line
- update graph with new data
- Disable SVG drag
- How to rotate D3 Chart XAxis label in vertical
- AngularJs choose charts framework d3.js vs highcharts
- How to determine if i have implemented d3 correctly?