D3.js - update a single element - d3.js

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/

Related

Linked tooltip on heatmap and sparkline

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

Overflow a circle outside the bounds

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

How to access to `this` of d3.js (svg node) in Clojurescript (Reagent)?

I am using d3.js in a reagent project, and want to convert the Javascript d3.select(this) to ClojureScript. How can I do this?
Here is an example of d3.select(this) in d3.js:
line 84 of:
http://codepen.io/zyzy5730/pen/JKkWQO?editors=0010
Here is the project and code where I want to add d3.select(this) in Clojurescript:
https://github.com/cmal/fcc-voting/blob/master/src/cljs/fcc_voting/views.cljs#L267-L269
I've tried to use this, reagent/current-component, (reagent/argv this) and (this-as this ...) . None of them seems to work.
I googled for some examples, they use d3.js in reagent and use this, but this in the examples are referring to a reagent component or an argument passed to (fn...), but in d3.js when using .on("mouseover", function(){ d3.select(this)...}, this refers to a svg node on which an event being triggered, maybe a rect or a group or something else.
Thanks.

D3.js Bar Chart axis label having select box

We have requirement to add drop down with axis label so that user can change the data from there.We require this drop down box effect on only specific label.
One approach we have tried is to add svg:image with label and the functionality is working fine but the other label is having the down arrow image that is not required. So can anybody help me out how I can select only one label? Actually there are multiple labels and its index is getting changed on chart update. Please find below code which is working for adding images to all labels.
e.g.
g.selectAll('.nv-x.nv-axis').selectAll('.tick.major').append("svg:image").
on("click", click)
.attr("xlink:href", "images/top-bar-logo.png")
.attr("width", 20)
.attr("height", 20).attr("x", -20);
You can use the filter() function to select the ticks that you need to append the image to. The documentation I've linked to has a few examples -- you might be able to do it without filter() by passing a different selector to selectAll().

D3 Scroll a node into view

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.

Resources