score:1
i'm not sure that it's a great idea to use renderarea
in a composite chart; as you can see, the colors get muddied together into brown, and it's not really clear what it's supposed to convey.
i think renderarea
works better with a stacked chart, where the area that is covered by each color means something.
that said, it's pretty easy to fix the problem you are seeing.
the reason why raising the dots doesn't work is because each child of the composite chart is in its own layer. so raising the dots only puts them at the top of that chart (where they already are).
instead, you can disable mouse interactions for the filled areas:
path.area {
pointer-events: none;
}
since the filled areas weren't interactive before, this shouldn't lose much, but you might want to be more conservative and restrict the rule to the particular chart with the selector #composite-chart path.area
Source: stackoverflow.com
Related Query
- Cannot hover over points that are behind path.area
- Circle points are not aligned with area shape
- D3.js - Line Graph: Area path goes over x and y axis on zoom
- How can I identify scatter plot data points that are included in a D3 brush?
- In d3.js map, points are hidden behind other features
- How to make axis "smart" and "flexible" so that the starting/end points on axis are sensible in D3 V4?
- D3 Area chart that tends to zero where values are missing
- Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript
- are there any way to change c3js stacked area chart opacity on mouse hover
- Change hover over of d3.js sunburst chart so that name of segment is appended rather than %
- Painless method to zoom&pan so that all elements are within drawing area - d3js
- Progressive path animation in d3.js: how do I loop over individual elements of a d3 selection, for eg, each path segment of an area chart?
- Convert SVG Path d attribute to a array of points
- Insert padding so that points do not overlap with y or x-axis
- Draw imbricated blocks that are rotated and fliped with d3.js
- Hover over an element underneath another element
- How to update elements of an HTML that the elements are created using data from a CSV file?
- Data points and ticks in the scaleBand axis are not aligned
- How do I animate points down a path on a map in D3.js?
- Using D3 requests (json) over SSL with path url gives Mixed Content error?
- d3.js - stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph
- mouse over event line path d3
- d3.js line and area graph - want to add a extra line defined by two points and representing a threshold/minimum value (for ease of viewing)
- D3.js event listeners cannot access "this" when ES6 arrow functions are used
- How to animate a path along with its points in d3
- Cannot plot GeoJSON points in D3/Leaflet app
- geoChoroplethChart map that displays cities / points of interest with tags
- How to achieve that bubbles are only clickable if completly zoomed d3js
- put line between two elements that are inside a <g> that has zoom events?
- Creating an area chart: path with NaN
More Query from same tag
- Scaling y-axis appropriate to data in multiple line chart display
- angular-dimple dependency injection
- Grouped bar chart data structure issue
- How to Make True Zero Duration Instant Transitions in D3
- How to evenly split d3 links between circles
- D3 Bar Chart Negative Values not Showing Up
- Use D3 to create a contour/polar graph
- D3: How to draw multiple Convex hulls on Groups of Force layout nodes?
- Animate Pie Chart in Angular
- Adding a drop down menu in the force-layout (d3.js)
- How do I display a diagram created with rcharts within my R shiny app?
- jquery tipsy tooltip not working with d3.js circles
- Reading text file with special characters using d3.request
- Make donut chart clickable
- Integrating d3.js Trend Chart (Area + Line) as data studio community visualisation
- How to make bars have different patterns in d3.js?
- Issue with node positions after updating d3 to v4
- Convert an SVG element to a g element using d3.js
- selectAll() and append() text element
- how to access specific data in an array using D3.js v5 for a stacked bar graph tooltip
- D3: How to assign size, colour to items (collision-detection visualisation)
- Filtering my data causes the y-axis to get screwed up
- d3 Pie Chart - Image on Outside Label
- Adding a hover tool tip bubble chart in d3
- Why will the exit() function not be called in d3 v5?
- d3 prevent firing of mouseout on contextmenu
- How to import ES2015 modules functions selectively, but with namespacing?
- calculating start position and width of a bar on 24 hour time scale(D3 JS)
- d3 Circle Packing - Printing labels with multiple lines
- D3.js Auto font-sizing based on nodes individual radius/diameter