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.
Related
I created a heatmap and sparklines next to the heatmap.
HERE the Plunker
Now I would like that when the user hovers over a cell of the heatmap, a red dot is displayed on the corresponding sparkline.
On the other hand, when the user hovers over the sparkline, the corresponding cell in the heatmap is highlighted.
I hope it's clearer with some drawings:
I thought I could change the code at this point:
var cells = svg.selectAll('rect')
.data(data)
.enter()
.append('g')
.append('rect')
//...
.on('mouseover', tip.show) // <- HERE
.on('mouseout', tip.hide);
I should keep track of the rectangle on which the mouse is located and somehow pass this data to the piece of code that controls the sparkline.
But I don't really know how to do it and I have not found similar examples.
Thanks!
HERE MY PLUNKER
add this liblary:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
To solve your problem, you need understand the concept,
The D3 can holding data when you put on it
The D3 can select base on class and id
The DOM element can hold attribute (Ex: attr-id)
Scale linear can be invers, that mean if you have domain you can have range and if you have range you can have domain
Element that draw with D3 is updatable & deletable
understand the liblary you use (d3-tip)
What i Change
i add class and id to element i want to select
if i want to use data, i save data to data-attribute
i make function to track my mouse on Line-chart, and invers it to get value
i draw object tip i want to use
read the code if you want to understand ask me which line you dont understand, if you need explanation
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
So I am trying to use topojson to load a map of the US and display the 50 states. When a state is clicked, I want to the display the counties within that state. The problem I am running in to though is that based on the formatting of the topojson file, I can't figure out how to know WHICH state is clicked and therefore don't know how to grab the corresponding counties from the file.
I am using a very similar implementation to the one presented by Mike Bostock on his site here: https://bl.ocks.org/mbostock/9656675
I am also using his version of the topojson file which can be found here:http://bl.ocks.org/mbostock/raw/4090846/us.json
When I click on a specific state, I can look at the "this" object but that ends up being just a bunch of boundary points.
Any ideas? (I can clarify if I am being too vague as well)
Clarification:
I realized that states have an id (sometimes a few depending on islands) numbered between 1-78.
If I try to create state groupings to add to the SVG like this:
g.append("g")
.attr("class", "states")
.selectAll("path")
.data(state_features)
.enter().append("path")
.attr("class", "states")
.attr("d", path)
.on("click", clicked);
I can later tell which state was clicked in the function that handles clicks like so:
function clicked(d) {
//can reference it in here with "this"
console.log(this.id);
}
This gives me the id of the state, but it seems like counties don't correspond to a given state so I don't know how to get the counties corresponding to that state.
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.