score:1
This is an interesting problem. The example you link to uses a single y
scale and yAxis
for all 4 sub-plots. In your situation, though, your data has a very different domain for each sub-plot and when you add the dynamic mouse over a shared scale just won't work. So, my solution would be to create a different y
scale and yAxis
for each subplot.
...
// variable to hold our scales
var ys = {};
var area = d3.svg.area()
.x(function(d) {
return x(d.date);
})
.y0(height)
.y1(function(d) {
return ys[d.symbol](d.price); //<-- call the y function matched to our symbol
});
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d, i) {
return ys[d.symbol](d.price); //<-- call the y scale function matched to our symbol
});
...
// for each symbol create our scale
symbols.forEach(function(s) {
var maxPrice = d3.max(s.values, function(d) {
return d.price;
});
ys[s.key] = d3.scale.linear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
.range([height, 0])
.domain([0, maxPrice]);
});
...
// build 4 y axis
var axisGs = svg.append("g"); //<-- create a collection of axisGs
axisGs
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
axisGs.each(function(d, i) { //<-- for each axisG create an axis with it's scale
var self = d3.select(this);
self.call(
d3.svg.axis()
.scale(ys[d.key])
.orient("left")
.ticks(4)
);
});
...
// adjust mouseover to use appropriate scale
focus.attr("transform", function(d) {
index = bisectDate(d.values, date, 0, d.values.length - 1);
console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
return "translate(" + x(d.values[index].date) + "," + ys[d.key](d.values[index].price) + ")"; //<-- finally in our mouse move use the appropriate scale
});
Fully working code here.
score:1
As far as best practices are concerned when you are dealing with n number of datasets you have to go for n number of y scales and their corresponding y axis. It is good for seperation of concern and keeps the visulization intact. here you can see the example.
http://grafitome.github.io/advanced-charts.html#(first chart)
Source: stackoverflow.com
Related Query
- Multiples with x/y axis and mouseover example - line path shows wrong values
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- D3.js - Line Graph: Area path goes over x and y axis on zoom
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- D3 Chart- place space between tick values and axis path lines
- Align lines and dots with x-axis values in line chart
- NVD3.js line graphs fail to scale y axis to max and min values
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- wrong date printing on x axis of line graph in d3 with extra tick
- How to create left axis with variable tick interval in tick values and has same distance between tick value
- How to make a mouseover interactive line graph with multiple data series and 2 y axes?
- Why animated d3 svg line is not synchronized with the axis shift in IE9 but synchronized in IE11 and Chrome?
- 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 version 4 path line smooth transition with Mike Bostock's example
- d3.js horizontal bar graph with positive and negative values - move y axis labels to far left side of graph
- d3 Animated Line Chart with Path and SVG
- dc.js graph won't show line and y axis values
- JavaScript d3 line graph with ordinal axis and json data
- I am trying to visualize my json object with D3. I want date to be the x axis and y to be sales. number values stored a string
- How can I connect a circle to a path with a line that is perpendicular to the x axis to create an "error line"?
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- nvd3 line chart with string values on x-axis
- d3.js change color and size on line graph dot on mouseover
- D3.JS time-series line chart with real-time data, panning and zooming
- Multiseries line chart with mouseover tooltip
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- D3: skip null values in line graph with several lines
- Special donut chart with different rings/arcs for positive and negative values
More Query from same tag
- D3 Sunburst - Possible to show certain layers
- How to use d3-jetpack with d3v4?
- I'm a bit stuck with array/object manipulation
- how to display data in which format using dc.js
- D3 show text for nodes when zoomed
- How to apply rotate transformation and don't change the coordinates system in D3.js?
- How to plot multiple lines one for each element of an array contains y values in vega spec data?
- Appended text is not updated according to CSV file changes
- d3.js - connecting shapes with lines (without using force or other layouts)
- D3 doesn't load a CSV file from an external URL
- Json D3 array contents not working
- Access nested data without appending in d3.js
- d3 choropleth: changing data without reloading map
- javascript d3.js date string parsing issue
- If statement for D3
- Grid lines not showing in D3 histogram
- X and Y axis are getting cut from edge in d3js
- Add data to server-side SVG with D3
- D3JS - Combining "rect" functions
- D3js charts reponsive
- d3.js How can I make an "infinite" background grid?
- c3.js: axis-y label overlapped
- Far side of the Globe
- Making Chart render for negative value efficiently
- Sorting week number and year in ascending order
- CSS3 - Transform-origin not working on SVG element in d3.js
- D3 Updating x axis ticks throws error "translate(NaN,0)"
- d3.js PopUp window with mouseout and mouseover
- Arc Based Text Alignment in D3
- JS, save svg to png error with xlink:href