I am a newbie to d3js and I am currently plotting some multiple line chart graphs. One thing I want to do is to add a legend for each line. I figured out that I can add some text and I can also give the text some color, which is same as the line's color. However, I would like to add some line representation in front of the text. For example,
Legend in Multi line chart - d3
as we can see here, the legend starts with a colored rectangle + text, and I want it a line (dashed line for example) rather than rectangle in front of the text.
Is there anyone can help me with this? Thanks a lot!
Related
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I'm coding a graph base on this example (http://bl.ocks.org/stepheneb/1182434), but with 2 lines. My current problem is:
In my first line (blue), it's possible to drag the line correctly, when I click in a circle point and move the mouse, the line is drawing correctly.
In the second line(red), I can click in the circle point and move it, but the line doesn't change.
My code:
https://jsfiddle.net/nattanlucena/oeybge1s/1/
I noticed the error on line 181, in this piece of code:
var lines = this.svg.select("path").attr("d", this.line_max_weight(this.points_max_weight));
Can anyone help me?
I am new to D3 and learning it. I am trying to build a curved line chart. That is i want to bend the line chart inside a half circle. It will be helpful if any one can tell me how to approach this in D3.
Something as shown in the link below:
http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer.jpg
This is very similar to drawing a line chart in Cartesian coordinates, but using D3's radial line function rather than the regular line function. Your line's x coordinate becomes the angle, and the y coordinate the radial distance.
var line = d3.svg.line.radial()
.radius(function(d){return r(d.y);})
.angle(function(d){return theta(d.x);});
This Fiddle shows a simple example with sample data.
Its called a Sunbusrt Chart, here is a few links to get you started.
Sunburst Partition By Mike Bostock here
Sequences sunburst By kerryrodden here
Hope it helps
Need to drill down the line chart.
But when two lines are meeting at the same point.One of the line is hidden at that point. I am not able to drill down the hidden line . Please suggest any method other than the deselecting the line chart in legend list.
I am using Highcharts to render a line chart (http://www.highcharts.com/demo/line-basic).
Every line in my chart has the same color and different markers on the end. Now what I want is when I hover over a line to change it's color.
you can find mouse events in plotOptions there you can manipulate the colors
this.chart.series[index].update({color:'color'});
this piece of code will be helpful.
here is a working example http://jsfiddle.net/vytEE/
hope this will help you