I want to add a watermark to a c3js chart, am not sure where to begin, and would appreciate any pointers in the right direction. Thanks.
You could get the root div of the chart and add a background-image:
http://jsfiddle.net/z47qk7u1/
d3.select(chart.internal.config.bindto)
.style ("background-image", "url('https://cdn.pixabay.com/photo/2013/07/13/12/42/do-not-copy-160138_960_720.png')")
.style ("background-size", "160px 160px")
.style("background-repeat", "repeat")
;
The trouble is, whatever you do here can be as easily removed as it is added, so if you're using the watermark to stop people copying things then anyone with a modicum of DOM knowledge can get round it. I know I do for all these "we detect you're using an adblocker modals" some sites pop up.
Building off mgraham's answer, you can add an text element to the chart's internal svg element.
d3.select(chart.internal.config.bindto).select("svg")
.append("text")
.text(text)
.attr("y","50%")
.attr("x","50%")
.style("fill", "grey")
.style("font-size", "50")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
Related
I am trying to draw objects parallel to the right of the series. Though I am able to do so, but they are getting chopped off. I could append the objects to the svg, but they dont maintain their positions. Need help to fix this. I am not sure how to push the "g".
my fiddle:
https://jsfiddle.net/sourabhtewari/xzsq4t1z/32/
This is what I am trying in the OnRendered of c3js
d3.select('.c3-chart-lines')
.append("circle")
.attr("cx", path.getPointAtLength(len-1).x + 60)
.attr("cy", path.getPointAtLength(len-1).y)
.attr("r", "15px")
.attr("fill", "red");
They're getting clipped out.
Try removing the clip-path on elements with the c3.chart class:
d3.selectAll(".c3-chart").attr("clip-path", null);
https://jsfiddle.net/xzsq4t1z/70/
This may mean you get other things coming out of the clip bounds too, but I couldn't see anything on a quick look
I tried adding permanent labels (names of nodes) to the Interactive Network Demo shared by Jim. (https://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/)
Being a novice in D3 and Coffee, I couldn't achieve the goal despite spending good amount of time trying to understand D3 and Coffee scripting.
Following is the coffee script i tried to add:
node.enter().append("text")
.attr("cx", (d) -> d.x)
.attr("cy", (d) -> d.y)
.text("text", (d) -> d.name)
Some help in achieving the same would be highly appreciated.
That example uses D3 v3.x. Unfortunately, there is a "magic" in v 3.x that will prevent you to achieve what you want (not to mention that text doesn't have cx or cy):
This is the node selection, which is the data binding selection:
node = nodesG.selectAll("circle.node")
.data(curNodesData, (d) -> d.id)
However, the next line is:
node.enter().append("circle")
And here comes the problematic magic:
The enter and append modify the data binding selection. So, when after that you try to append a text to node, you're actually appending a text element to a circle element, and that will not work!
Solution: create SVG groups, where you can append both circles and texts.
This great tutorial shows how to update all svg elements. How would I select just one element and update it? I know how to add event listeners in D3.js to update single elements, but what if I need to update an element due to some external factor? Thanks.
This page covers all of the ways you can select element(s): https://github.com/mbostock/d3/wiki/Selections
For example, you could do something like:
var circle = svg.select("#circle-0");
circle
.transition()
.duration(750)
.style("fill", "steelblue");
Here is a working example: http://jsfiddle.net/elevine/FYY9k/
I'm using a D3 tree. Similar to: http://bl.ocks.org/mbostock/4063570
However, this particular diagram is bigger than the browser window.
Given that i know exactly which one of the JSON element's that i want to reveal.
How could i scroll that element into view within the svg canvas?
The easiest way to achieve this is probably to wrap what you want to appear in a g element and use a transition on the translation.
groupToShow.attr("transform", "translate(1000,1000)")
.transition()
.duration(1000)
.attr("transform", "translate(0,0)");
Adapt the values for translation and duration as needed.
I am implementing the Zoomable Treemap in D3 (http://bost.ocks.org/mike/treemap/), however I have modified it so the leaf rects will go to URLs when clicked. It also adds an ellipsis if the title is too long.
I'd like to implement word wrapping on leaf rects instead but cannot get it to work. I wanted to add a set of tspans to the text but am struggling with the execution order too much to understand where to put it.
Code: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm
Data: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json
I've researched that I either need tspans breaking it up or a div with the text inside but don't know how to do either. There are examples of text wrap for the regular D3 Treemap but I've found none for the Zoomable Treemap and the code is significantly different.
The easiest thing to do is probably to replace the SVG text elements with divs inside foreignObject. To do that, you would replace
g.append("text") //was text
.attr("dy", ".75em")
...
with
g.append("foreignObject")
.attr("dy", ".75em")
...
.append("xhtml:div")
...
It might also be advisable to set the width and height attributes of the foreignObject (using code similar to what you're using to determine whether the text is too long) so that the text flows correctly.