score:1
Accepted answer
You are treating your single path
like it's two separate elements. It's just one element and your area
call (and style) is overriding your line
call (and style). If you want to style them different, plot a line and an area.
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
Updated fiddle.
Source: stackoverflow.com
Related Query
- In d3, how do I apply a style to my line chart for both the line and the area under the line?
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- D3.js: how to decide both the area and the color of each square by the size of each content in treemap?
- Time in x-axis and data for the y-axis for line chart in d3.js doesn't match/show with what (data) is on JSON
- How to rotate the text labels for the x Axis of a nvd3.js line chart
- How to synchronize scatter points and line chart during an update to the data?
- D3.js: How can I give the same style to Top and Right line of a grid with the same style than grid lines?
- Color the area formed between Line Chart and Threshold line
- How do I get both a line and area styled in my d3 line chart?
- How to apply the the enter() and data() methods for ds3 in-memory data
- D3.js: How to get the computed width and height for an arbitrary element?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- how to style style line chart points in c3js
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- How do I get my area filled beneath my d3 line chart to be a gradient?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to style slider on chart in D3.js and show label of dynamic y-value?
- How to apply tooltips for dc.js chart after chart is rendered
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- D3: How to use exit().remove() for Multi-Series Line Chart
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- 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 apply "background: repeating-linear-gradient" style for rect using d3.js
- How to apply rotate transformation and don't change the coordinates system in D3.js?
- d3v4 checkout chart - making sure the color scheme is correct for the legend and circles
More Query from same tag
- Show yearly X labels for June instead of January on d3.js chart
- How to get a data from an analysis in R in Json file format to get D3 visualisations?
- d3.js Family Tree Spouse Highlight
- Not able to read external file using D3.js
- What is the correct way to import and use d3 and its submodules in ES6?
- d3.js creating two elements per data point
- D3: Draw part of interpolated path with dashed stroke
- d3 General Update Pattern
- Select thin line
- d3plus: how to flip order of drawn boxplots?
- Is it possible to create a treemap when any column is called "value"
- Displaying d3 chart in django
- How do I make this Angular D3.JS Chart Style and add Links to each pie?
- Using D3.nest() to create an array of objects by column header
- text align right relatively to parent G in SVG
- How to get data from d3js polyline?
- D3.js: placing nodes inside other node
- d3.js dougnut pie chart legend toggling
- toggling between two functions
- Collapsible/hierarchical AND force-directed graph in d3.js
- 'd3.nest()' cannot read property of undefined
- D3 Choropleth Map: Colors are not appearing
- Display only a single state with counties from a full US counties map
- d3.js : Applying styles to individual lines
- nvd3 multibar chart with stacked option the bars are not appearing properly
- Line up JQuery slider with label
- D3 - How to loop through an object with keys for a bar chart
- remove a legend dimple.js
- Why is my D3 SVG not getting the correct width/height from Angular element
- How to rotate all text by x degree on x-axis in Javascript