score:1
Accepted answer
i would do something like this :
if you have the points to make the path at the top like so :
var points = { x:0,y:60},{x:50,y:70},{x:100,y:60}.. and so on
and you have data like in the question for the vertical lines. i would make a new array for the 5 lines you want to create like so :
var newlinedata = [];
for(i=0;i<data.length;i++){
var thisline = { x1:i*step,y1:0, x2:i*step,y2:data[i].totalincome };
newlinedata.push(thisline); //line data
}
then use this data to create the lines like so :
var link = svg.selectall(".link")
.data([newlinedata])
.enter().append("line")
.attr("class", "link")
.style('stroke','black')
.style("stroke-width", function(d) { return math.sqrt(d.value); });
//console.log(line);
link.attr("x1", function(d) { console.log(d); return d.x1; })
.attr("y1", function(d) { return d.y1; })
//.attr("y1", function(d) { return x[d.y1]; }) if using axis : x is the axis
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; });
here is a fiddle how it would work without axis : https://jsfiddle.net/reko91/knetxt5n/
but if you pass the axis like i have shown above it should go in the correct direction for you :)
code below too in case jsfiddle goes down.
var svg = d3.select('#container').append('svg')
.attr('width', 500)
.attr('height', 500)
//.append('g')
var data = [
{"quarter": "a", "totalincome": 60 },
{"quarter": "b", "totalincome": 70 },
{"quarter": "c", "totalincome": 60 },
{"quarter": "d", "totalincome": 80 },
{"quarter": "e", "totalincome": 75 }
];
var newlinedata = [];
var step = 50;
for(i=1;i<data.length+1;i++){
var thisline = { x1:i*step,y1:0, x2:i*step,y2:data[i-1].totalincome };
newlinedata.push(thisline); //line data
}
var link = svg.selectall(".link")
.data(newlinedata)
.enter().append("line")
.attr("class", "link")
.style('stroke','black')
.style("stroke-width", function(d) { return math.sqrt(d.value); });
//console.log(line);
link.attr("x1", function(d) { console.log(d); return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='container'>
</div>
Source: stackoverflow.com
Related Query
- Plot lines in D3 Area Chart
- d3js multi-line chart is being drawn off the plot area - is update pattern to the issue?
- plot dots on multiple lines in line chart
- Add lines to stacked area chart D3
- NVD3 - Adding and resizing multiple vertical lines to stacked area chart
- Update the y-axis of a brushed area chart
- d3.js chart area filling with different colors
- Using d3 to shade area between two lines
- conditional fill in d3.js for area chart
- d3js line chart error - drawing weird area
- d3.js How to add lines to a bar chart
- Stacked Area Chart in nvd3js - X Axis overflow
- D3.js get nearest X & Y coordinates for Area Chart
- d3JS: Plot lower-density data version of a large data set when zoomed out on line/area chart
- How to make curved lines to straight lines for Hierarchy Chart using d3.js
- Prevent d3.js area chart from dropping below 0 or x-Axis
- How do I get my area filled beneath my d3 line chart to be a gradient?
- d3 bar chart y axis ticks and grid lines above max value
- C3js Area Range chart
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- Continuously updating lines in a d3 chart based on SignalR input
- Build D3js Area Chart with negative values
- Shade area between two lines using D3
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- Combining stacked area chart and brushing in D3
- Multi-Series timeline: plot the lines one by one
- Plot d3 chart on to Leaflet / Mapbox map
- nvd3 stacked area chart looks glitchy how to fix?
- Plot dimple(d3.js) chart in deck.js section
More Query from same tag
- How to convert/transform in the DOM following dl dt structure to table on the fly using jQuery or d3js in a document
- D3: Update Data Down the DOM
- D3.js not showing in firefox
- Managing large hierarchical data (collapsible tree) with auto-zooming to the expanded node
- insert anchor element before every bar column ti make it tabbable
- csv filsize limit when importing with d3.csv
- Which workflow to get polygons from a geographic area and a raster file?
- Infinite zooming in force layout d3.js
- D3 js links length between image nodes
- d3.data skipping the first row of data
- Dynamically Update Styling on Button Click, D3 Bar Chart
- How to add reference line to nvd3 discreteBarChart
- How to modify c3.js legend's text color
- d3 text function on a selection giving undefined
- Multi-series bar chart in DC-js
- C3.js bar plot with dates as x axis
- How to interpret short drag events as clicks
- Using Angular ng-class with d3.js on svg element
- d3.js - Select node element based on attributes value using .selectAll()
- Arc Tweening is snapping as opposed to animating
- How to remove the border on the hover element in nvd3
- d3 animate path by arc
- d3 v4 parallel coordinates selection of paths with d3 v4 brushes
- D3: How to define responsibility text?
- GetBoundingClientRect but relative to the entire document
- Dot Plot in D3.js
- Get an array of points from D3 line()
- D3 Visualization - Updating in ngOnChanges (Angular / TypeScript)
- Issue about serving html and drawing in node.js
- d3 accessing nested data in grouped bar chart