Is it a bad practice to create a chart legend using html and not svg?
For example instead of
d3.select('g.chart-legend').append('text')
.text('ID');
with html
d3.select(div.chart-legend').append('span')
.text('ID');
No it's not. It depends upon the requirements. In general, if you are using svg based legends, it will be easier to draw shapes and place legends relative to your svg elements and if you go with html based legends, text reflow would be easier in case of dynamically obtained legends. Might be useful if you might end up with a lot of legends with long text and/or looking at responsive layouts.
Note that you would have to add your legends outside of your root svg element in case you want to add html based legends. So a part of your chart will outside of the svg. So if you're looking at any way of saving the svg or serializing it, you'll miss out on the legends.
Related
I have lots of svg element containing each one a line chart. I'd like to display these charts at groups of four. If I understand well from the documentation, it'd be better to use a grid for this purpose since I can select position I want (single box of the grid) for a specific graph. Is it true, or is there another better way to do this?
NB: charts are built each one from different datasets and using d3.js and so javascript.
Thank you so much for the help.
If it's possible, I'd like you to show me a code snippet just to understand better.
Thank you again.
I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?
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 am using the Zoomable Pack Layout provided on the D3 website: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
All labels of the circles are displayed when the layout is displayed.
The problem is that for small circles which are close together, the labels overlap. I would like to know if there is a way to hide the overlapping text of the labels?
I have read about "foreignobject", but if this is the answer, I am not sure how and where to incorporate it in the code.
You could restrict the display of text based on either the level of the hierarchy, the radius of the circle or a combination of both. Both are in the pack output. Use titles for hover detail.
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.