I am brand new to working with with d3.js
I am trying to change the style of the links in the interactive-tree example that comes packaged with d3.js
https://github.com/mbostock/d3/blob/master/examples/tree/tree-interactive.html
they are currently beziers, and I would like them to be angular, i.e. visio class diagram style connections.
seems that there needs to be some extra definition of the diagonal around lines 42-43, but I can't tell from the documentation what that would be.
any help is most appreciated.
You can't do that with d3.svg.diagonal. Have a look at d3.svg.line and in particular the interpolate function.
Related
I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that
I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
I would like to use d3.js to build a pedigree tree.
All exemples that I found are showcasing organic trees.
Are there any exemples out there with a pedigree like style ?
You could accomplish this using either the cluster or tree layouts. And using a custom path generator to draw orthogonal lines connecting nodes, as in this elbow dendrogram. I guess I was feeling inspired so I gave it a shot:
http://bl.ocks.org/2966094
I recently created some examples of using D3 to draw pedigrees in the style that most software does. There are examples for showing how to make it expand and collapse, transitions, and showing descendants as well as ancestors.
I'm replacing DotNet Charting charts with KendoUI. I need to be able to put a multiple line label on a line chart. See the image below with the red circle on the label. Any suggestions would be greatly appreciated.
See my current chart and the DotNet Cart I need to replace:
Short answer: you can't.
Long answer: You can't, but you there is a bug in Kendo that will let you... sort of.
Kendo is creating an SVG on the fly for your chart. SVGs are just XML, and you can inject XML into the element via the javascript config.
For your label, you have to use elements to position text. See the SVG spec for this element: http://www.w3.org/TR/SVG/text.html#TSpanElement
The problem here is that Kendo uses left-justified text, and you can't change the parent element with this bug. That means you have to offset everything by hand, one pixel at a time. If your text is static, this might work; if it is dynamic, I wouldn't even attempt it.
You might be able to hack something together via JS, and manipulate the SVG on the fly each time Kendo modifies it... but you may as well write a charting library if you're going to that much work.
EDIT: For your use, it might be better to rotate the labels, if you don't have to mirror the old display exactly.
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/