score:5
Accepted answer
you don't need d3.svg.line()
here. just create a simple line:
var lineend = 270;
var line = svg.append("line")
.attr("x1", lineend)
.attr("x2", lineend)
.attr("y1", 0)
.attr("y2", height)
.attr("stroke-width", 8)
.attr("stroke", "black")
.attr("stroke-dasharray", "8,8");
this is the plunker: http://plnkr.co/edit/dohzjrvbhzfqwfbyerkh?p=preview
ps: this is not 270 on x-axis, this is simply 270px on the svg. right now you cannot use x
as a scale because there is no domain. set a domain for x
and use it to set the width of your bars.
first, get rid of this:
var max_n = 0;
var category = []
for (var d in info) {
max_n = math.max(info[d].value, max_n);
category.push(info[d].name)
}
var dx = width / max_n;
var dy = height / info.length;
now, set the scales:
var y = d3.scale.ordinal()
.domain(info.map(function(d){ return d.name}))
.rangeroundbands([0, height], .1);
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(info, function(d){return d.value})])
and then use these scales for your bars:
.attr("x", 0)
.attr("y", function(d){ return y(d.name)})
.attr("width", function(d) {return x(d.value)})
.attr("height", y.rangeband())
with all these corrected, now we can use 270 in the scale:
var line = svg.append("line")
.attr("x1", function(){ return x(lineend)})
.attr("x2", function(){ return x(lineend)})
.attr("y1", 0)
.attr("y2", height)
.attr("stroke-width", 6)
.attr("stroke", "black")
.attr("stroke-dasharray", "8,8")
here is the updated plunker: http://plnkr.co/edit/gtpa12qsf9mboay6medd?p=preview
Source: stackoverflow.com
Related Query
- How to add a line on x-axis on a horizontal bar chart in d3
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- How to add a line at top of stacked bar chart with d3.js?
- d3js - Stacked Bar Chart in Horizontal Axis - How do I set x so the bars are seperated?
- D3 Charting Tool: How to add label at right of target line (additional horizontal line) in column chart
- How to add a properly scaled y axis to a stacked d3 bar chart
- How to add x axis text in Bar Chart column
- How to apply horizontal break to a d3.js bar chart
- How to add horizontal line over y-axis in Plottable.js
- d3.js How to add lines to a bar chart
- How to add a fixed range vertical line to a D3.js chart
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- How to add background shading to D3 line chart
- How to add circles onto line chart path d3.js
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- D3 : How to add labels top of in each bar in grouped bar chart
- How to create a % difference arrow line with value in a bar chart using D3.js
- how to make the x axis scrollable in a d3 line chart graph
- How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart
- horizontal lines along the y axis d3 bar chart
- How to add text legends in bars of a bar chart in D3?
- Is there a way to add horizontal scroll bar for a bar chart made using dimplejs?
- How to make this D3 horizontal bar chart work?
- how to display data from 1st point on words on y axis for line chart in d3.js
- How to add live data to stacked bar chart
- How to add space between axis and line in D3 line chart?
- Add vertical line to d3js bar chart
- NVD3 multi bar horizontal chart x axis domain
More Query from same tag
- Dividing aggregate by aggregate (D3 / DC/ Crossfilter / Reductio)
- D3JS remove classes similar to JQuery removeClass()?
- Unable to display legend for a quantile scale in D3
- How to draw an upper limit for nvd3.js graph
- sum up data without specific key name
- How to position the legend to the right of the donut chart
- Generating 3D surface plots with Vega?
- D3.js: Clustered Force layout with text and tool tips
- d3 match element id to update existing item
- D3 Logarithmic Tick Labels as Powers of 10
- D3 multi-line chart line path not displaying: d attribute missing
- Pie chart interpolate not working properly
- Center D3 Piechart in the center of a div, respecting it's dimensions
- javascript d3 get the biggest value from a multi-nested array/object dataset
- D3 taking an array of two objects and reading it into a D3 shape
- d3: dragging for static off-screen visualization
- Cannot read property 'values' of null
- D3 - flare not showing all data
- Give Entire D3 Map Event Listener
- How to call all values in nested JSON data (d3js)
- How to interact JQuery slider with d3 vertical lines for every data point
- nvd3 scatter chart circle size not working
- d3 zoom pan to specific region of line graph
- How to escape all special characters in a string?
- d3js axis dates start and end value only
- D3.JS Bar chart rounded corners
- d3.js Set d3-tip background to element colour
- D3js and scaleLinear function
- Drag is not working in this simulation layout
- In D3 hexbin, increase radius of multiple hexagons with mouseover