the issue here isn't the composite axes, which you are using correctly. it's the series definition. the first parameter of the addseries either takes dimensions to disaggregate by or a field which is not in the data, which it uses as a label. the only limitation of this approach is that you cannot label your series by a dimension name in the data. in this case the first series for example (it applies to all), is disaggregated by "yes" which for the line series means it tries to draw a line for each value of "yes", meaning 1 line per row, hence all the single unconnected points. the fix is to just name your lines something different. for example:
mychart.addseries("y", dimple.plot.line, [dateaxis, yesaxis]); mychart.addseries("n", dimple.plot.line, [dateaxis, noaxis]); mychart.addseries("u", dimple.plot.line, [dateaxis, unsureaxis]);
here's your updated fiddle: http://jsfiddle.net/rawyw/2/
if you want the names to look like they match you can just add a trailing space to the series names:
mychart.addseries("yes ", dimple.plot.line, [dateaxis, yesaxis]); mychart.addseries("no ", dimple.plot.line, [dateaxis, noaxis]); mychart.addseries("unsure ", dimple.plot.line, [dateaxis, unsureaxis]);
this will also work
- Dimple.js line chart with composite axis, no links between points on series
- Time series line chart is not sync with axis
- D3 Multi Series Line chart with non time x axis
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- Line chart not aligned with x axis
- Incomplete line chart with missing points and missing lines
- How to create a multi-series line chart with series for each unique item in 1st column?
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- d3.js How to draw line chart with vertical x axis labels
- D3 Multi Series Line chart not working with correct xAxis values
- D3 Line Chart not having proper X & Y axis plotting with Labels
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- D3.js Line chart with relative min and max in Y axis
- line graph renders wrongly and problem with the X axis (time), cannot brush the graph - time series dc.js
- D3 V4 Multi series line chart: Adding data points to lines with same color as lines
- A scatterplot with links between points using d3?
- D3 Multi Series Line Chart with Clickable Legend
- update series order in dimple multi-series chart with interactivity
- NVD3 Line Chart -- Overlay Points with Independent Events
- How to make X axis timescale with equal interval between elements on chart independent of time range
- Customize axis points in d3 chart with respect to bar width
- X axis not displaying on Multi Series Line Chart using d3.js
- Getting d3 axis tick marks to line up center with graph points
- line chart unable to draw with month on x axis
- d3.js line chart with time on both axis
- nvd3 line chart with string values on x-axis
- How to draw a line / link between two points on a D3 map based on latitude / longitude?
- D3.JS time-series line chart with real-time data, panning and zooming
More Query from same tag
- d3 change attribute of all elements
- How do I set the focal node in a D3.js Force Directed Graph?
- How do I get D3 Data Driven Document to display a moment.js datetime in the correct time zone?
- First degree node neighbors in d3 tooltip
- show percentage in d3 pie chart
- D3 - Rendering Multiple Years' Worth of State Data on US Map
- Draw a curved path up to the circle's border in D3.js
- d3 radial tree bug with degenerate trees
- How can I distinguish if a request came from a Fetch API call, in a Node.js / Express / D3.js app?
- D3 stack layout issues
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- How do I change the value of the y-axis by 30 instead of 10?
- NVD3.js: Stacked and grouped bar chart with two y-axis
- numberDisplay in dc.js that shows the total sum of values in the row chart
- extend x and y axis length in scatterplot, d3js
- Add D3.js v4 graph within a NgbAccordion in ng-bootstrap
- d3pie.js formatted value displaying
- D3 collapsible tree, change colour of knots and avoid line/text overlap
- How to transform and rotate the rectangles on partition layout in d3.js
- d3 custom order bar series with two categories
- Event viewreset is not fired in leaflet version 1.0.2
- C3js Stacked Bar Chart with a hidden bar
- Update Bar chart on new data
- d3: how to visualize a simple 2D matrix?
- How to group multiple values in nested D3 to create multiple rollup sum chart ?
- nvd3 set scale from big to small
- for loop within d3.json
- Specifying Ticks on D3 Bar chart with Time Series data and scaleBand