score:1
i'm posting the solution that i used. https://jsfiddle.net/yasirunilan/rvoft1h8/7/
var data = [{
name: "usa",
values: [{
date: "2000",
price: "100"
},
{
date: "2001",
price: "110"
},
{
date: "2002",
price: "145"
},
{
date: "2003",
price: "241"
},
{
date: "2004",
price: "101"
},
{
date: "2005",
price: "90"
},
{
date: "2006",
price: "10"
},
{
date: "2007",
price: "35"
},
{
date: "2008",
price: "21"
},
{
date: "2009",
price: "201"
}
]
},
{
name: "canada",
values: [{
date: "2000",
price: "100"
},
{
date: "2001",
price: "110"
},
{
date: "2002",
price: "145"
},
{
date: "2003",
price: "241"
},
{
date: "2004",
price: "101"
},
{
date: "2005",
price: "90"
},
{
date: "2006",
price: "10"
},
{
date: "2007",
price: "35"
},
{
date: "2008",
price: "21"
},
{
date: "2009",
price: "201"
}
]
},
{
name: "maxico",
values: [{
date: "2000",
price: "100"
},
{
date: "2001",
price: "110"
},
{
date: "2002",
price: "145"
},
{
date: "2003",
price: "241"
},
{
date: "2004",
price: "101"
},
{
date: "2005",
price: "90"
},
{
date: "2006",
price: "10"
},
{
date: "2007",
price: "35"
},
{
date: "2008",
price: "21"
},
{
date: "2009",
price: "201"
}
]
}
];
var width = 500;
var height = 300;
var margin = 50;
var duration = 250;
var lineopacity = "0.25";
var lineopacityhover = "0.85";
var otherlinesopacityhover = "0.1";
var linestroke = "1.5px";
var linestrokehover = "2.5px";
var circleopacity = '0.85';
var circleopacityonlinehover = "0.25"
var circleradius = 3;
var circleradiushover = 6;
/* format data */
var parsedate = d3.timeparse("%y");
data.foreach(function(d) {
d.values.foreach(function(d) {
d.date = parsedate(d.date);
d.price = +d.price;
});
});
/* scale */
var xscale = d3.scaletime()
.domain(d3.extent(data[0].values, d => d.date))
.range([0, width - margin]);
var yscale = d3.scalelinear()
.domain([0, d3.max(data[0].values, d => d.price)])
.range([height - margin, 0]);
var color = d3.scaleordinal(d3.schemecategory10);
/* add svg */
var svg = d3.select("#chart").append("svg")
.attr("width", (width + margin) + "px")
.attr("height", (height + margin) + "px")
.append('g')
.attr("transform", `translate(${margin}, ${margin})`);
/* add line into svg */
var line = d3.line()
.x(d => xscale(d.date))
.y(d => yscale(d.price));
let lines = svg.append('g')
.attr('class', 'lines');
lines.selectall('.line-group')
.data(data).enter()
.append('g')
.attr('id',function(d){ return d.name.replace(/\s+/g, '')+"-line"; })
.attr('class', 'line-group')
.on("mouseover", function(d, i) {
svg.append("text")
.attr("class", "title-text")
.style("fill", color(i))
.text(d.name)
.attr("text-anchor", "middle")
.attr("x", (width - margin) / 2)
.attr("y", 5);
})
.on("mouseout", function(d) {
svg.select(".title-text").remove();
})
.append('path')
.attr('class', 'line')
.attr('d', d => line(d.values))
.style('stroke', (d, i) => color(i))
.style('opacity', lineopacity)
.on("mouseover", function(d) {
d3.selectall('.line')
.style('opacity', otherlinesopacityhover);
d3.selectall('.circle')
.style('opacity', circleopacityonlinehover);
d3.select(this)
.style('opacity', lineopacityhover)
.style("stroke-width", linestrokehover)
.style("cursor", "pointer");
})
.on("mouseout", function(d) {
d3.selectall(".line")
.style('opacity', lineopacity);
d3.selectall('.circle')
.style('opacity', circleopacity);
d3.select(this)
.style("stroke-width", linestroke)
.style("cursor", "none");
});
/* add circles in the line */
lines.selectall("circle-group")
.data(data).enter()
.append("g")
.attr('id',function(d){ return d.name.replace(/\s+/g, '')+"-circle"; })
.style("fill", (d, i) => color(i))
.selectall("circle")
.data(d => d.values).enter()
.append("g")
.attr("class", "circle")
.on("mouseover", function(d) {
d3.select(this)
.style("cursor", "pointer")
.append("text")
.attr("class", "text")
.text(`${d.price}`)
.attr("x", d => xscale(d.date) + 5)
.attr("y", d => yscale(d.price) - 10);
})
.on("mouseout", function(d) {
d3.select(this)
.style("cursor", "none")
.transition()
.duration(duration)
.selectall(".text").remove();
})
.append("circle")
.attr("cx", d => xscale(d.date))
.attr("cy", d => yscale(d.price))
.attr("r", circleradius)
.style('opacity', circleopacity)
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(duration)
.attr("r", circleradiushover);
})
.on("mouseout", function(d) {
d3.select(this)
.transition()
.duration(duration)
.attr("r", circleradius);
});
/* add axis into svg */
var xaxis = d3.axisbottom(xscale).ticks(5);
var yaxis = d3.axisleft(yscale).ticks(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height-margin})`)
.call(xaxis);
svg.append("g")
.attr("class", "y axis")
.call(yaxis)
.append('text')
.attr("y", 15)
.attr("transform", "rotate(-90)")
.attr("fill", "#000")
.text("total values");
var datanest = d3.nest()
.key(function(d) {
return d.name;
})
.entries(data);
var legendspace = width / datanest.length;
// loop through each symbol / key
datanest.foreach(function(d, i) {
// add the legend
svg.append("text")
.attr("x", (legendspace / 2) + i * legendspace) // space legend
.attr("y", height)
.attr("class", "legend") // style the legend
.style("fill", color(i))
.on("click", function() {
// determine if current line is visible
var active = d.active ? false : true,
newopacity = active ? 0 : 1;
// hide or show the elements based on the id
d3.select("#" + d.key.replace(/\s+/g, '') + "-line")
.transition().duration(100)
.style("opacity", newopacity);
d3.select("#" + d.key.replace(/\s+/g, '') + "-circle")
.transition().duration(100)
.style("opacity", newopacity);
// update whether or not the elements are active
d.active = active;
})
.text(d.key);
});
Source: stackoverflow.com
Related Query
- D3 Multi Series Line Chart with Clickable Legend
- D3 Multi Series Line chart not working with correct xAxis values
- D3 Multi Series Line chart with non time x axis
- dc.js Series Chart multi line
- Multi series chart (D3) with missing values
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- Dimple.js line chart with composite axis, no links between points on series
- d3: tooltips on multi series line chart at each line when mouse hover event
- simple multi line chart with D3
- Legend in Multi line chart - d3
- Time series line chart is not sync with axis
- How to create a multi-series line chart with series for each unique item in 1st column?
- SVG Legend for multi line chart d3 v6
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- Error displaying dots on a multi series line - dots chart
- D3 line chart legend not working with v3 but working with v2
- dc.js multi line series chart filtering
- How to draw a multi line series graph using d3.js with json data using angular directives
- Using D3, I am trying to add and remove lines from a multi line chart when the legend is clicked
- D3 V4 Multi series line chart: Adding data points to lines with same color as lines
- d3.js - Multi series line chart tool tip issue
- How to add tooltip with eclipse in legend in line chart in D3.js
- Animated Path multi series line chart in D3.Js
- d3.js multi line chart with brush
- D3 Interactive Legend on Multi Line Chart Issue
- How to render multi line chart with DC.js with the following type of data - JAVASCRIPT (DC.js)
- Show labels conditionally on multi series line chart
- d3 Multi Series Chart with Incorrect Values
- D3 Multi Series Line Chart
- Issue with d3 Multi Line Chart
More Query from same tag
- How to get updated and rendered value of axis in NVD3.js
- Scatter plot with percentage Axis in dimplejs
- d3js Circle Pack diagram with nested single child arrays
- D3js v5 grouped bar chart data x.domain labels and data separated
- d3js multiple targets to a single node
- d3 V4.2.1 TypeScript 2.0 error importing d3-selection-multi
- Multi-layer SankeyNetwork (NetworkD3) does not plot in R
- Argument of type is not assignable to string
- Collapsible tidy horizontal tree from obervablehq migrated to html is rendering only a single large node in the middle
- angular2-nvd3 error: groups.watchTransition is not a function
- Interactive SVG / control through links
- Get x,y location of D3 point on path
- d3js - collection of downloadable examples?
- d3.polygonContains always returns false
- d3 path radius calculation for quarter circle
- Building a graph from ordered pairs
- Venn Diagram with d3js
- Dynamic Node Addition/Updation on D3 js Network Graph on button click
- Creating a Range Slider (Dates) for a Choropleth Map
- Change date format to string d3 js
- How to change the position of Legends using D3.js
- Best way to solve typescript error - property does not exist on type
- How to enable dragging for D3 elements overlaid on a leaflet map
- Updating a D3 pie chart correctly
- Unable to display legend for a quantile scale in D3
- How can I dynamically generate javascript within a script tag using jade and express
- Prevent panning outside of map bounds in d3v5
- d3 animate path by arc
- Separate mouse clicks for circles and background in D3 circle pack
- How to pass Javascript dynamic array to d3 dimple chart