score:4
the other answer provides an alternative (and the correct one by the way) to your problem. my goal here is to explain why you got the false
.
this boils down to the old and famous case of comparing objects ({} !== {}
) in javascript:
console.log({} === {})
you can read more about this subject by looking at the answers to this question and this question. the first answer to this question is also quite interesting and didactic.
back to d3:
in d3 v3 and below selections are arrays, while in d3 v4 and above (like v5, the one you're using), selections are objects. both will return object
for typeof
:
const svg = d3.select("svg");
console.log(typeof svg)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
and, in both cases (arrays or objects), the comparison will return false
.
because of that, even if two different selections point to the same dom element, the selections themselves, which are objects, are different:
const svg1 = d3.select("svg");
const svg2 = d3.select("svg")
console.log(svg1 === svg2)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
finally, regarding your comment, you're using the local variable wrong: you have to set it to the node, not to the selection. the api is clear:
local.set(node, value) <>
sets the value of this local on the specified node to the value, and returns the specified value. (emphasis mine)
if you use it correctly, it will work:
const a = d3.select("svg");
const b = d3.select("svg");
const local = d3.local();
local.set(a.node(), 561);
console.log(local.get(b.node()))
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
score:3
use node()
d3.select("svg")
- return d3 selection object
d3.select("svg").node()
- return dom node
console.log(d3.select("svg") == d3.select("svg"))
console.log(d3.select("svg").node() == d3.select("svg").node())
<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>
<svg></svg>
Source: stackoverflow.com
Related Query
- Why does 'd3.select("svg") == d3.select("svg")' resolve to 'false'?
- Why does d3.js v3 break my force graph when implementing zooming when v2 doesn't?
- SVG: why does external css override inline style for text?
- Why does d3.select() return array of array?
- Why does this D3 code add the <p> element outside the body, instead of inside it?
- Why does my d3 force-directed graph not display edges?
- Why does my angular component ignore my css file?
- Why does event listener callback function only work inside function scope?
- Why does this SVG graphic bog down Webkit only when it's large?
- Why does my line chart transition looks laggy?
- Why does this syntax work over the other one with d3.json requests?
- Why does it need two clicks in D3.js for my click event to fire?
- why does d3 rescale all scales during zoom?
- Why does a CSS transform,translate change the rotation for rotated elements?
- Why does rotating element make it bounce?
- Why does D3.js not display my geoJSON file ?
- Why does fill opacity change the shade of fill?
- Why does transition remove text from my labels?
- Why does converting a negative string into a number ( +"-2.333" ) return NaN, only when the string came from d3.format function?
- Why does forceNetwork in networkd3 R display all nodes not in edgelist?
- Why does the callback function called at the end and how to test the function?
- Why does AngularJS $scope.watch() stop working when I tell it to watch an Array?
- Why does this code not reset d3 zoom state?
- Why does this title graphic not update with World
- Why does d3 always append to the body instead of my selection?
- Why does this code work for counting one item in a list but not the others?
- Why does this d3 chart render with crosses, then get rid of them upon moving a node?
- Why does this vanilla js function return different results in d3v3 and d3v4
- Why D3 events that deal AngularJS models does not have effect in binding?
- Why does the NVD3.js line plus bar chart example render two charts instead of one?
More Query from same tag
- How can I add a label with value to every point of the chart?
- Angularjs testing D3 directive compile bug
- Zooming datasets in d3.js
- zoomable chart | Scope problem when zooming
- Problems with creating a y axis in d3
- D3.js Version 4. Basic rendering of circle
- Identifying the function used in this d3 stacked bar chart example
- D3 linear scale , how to show customised strings as ticks ?
- D3.js - Zooming to bbox with a dropdown menu
- Gettin crossfilter.js error "too much recursion"
- How can I draw circles for two different columns in d3 v5?
- How do I scale in d3.js
- d3.js: How to add value below the label in donut chart
- D3.js Fisheye.js strange mousemove behavior
- extract month day and year after parsed date d3.js
- How can I open and parse a local csv file into an array?
- Adding transition animation breaking tooltip mouseover
- D3 Angular - line break in axis label
- What is the replacement of d3.scale.category10().range() in Version 4
- changing text font through css for specific text in d3
- d3.js Radar chart with images as labels
- d3.style won't set width of HTML element
- set maximum value for c3js scatter chart plot size
- CSV/TSV comment lines d3
- How to update the fill color on existing svg elements with d3.js?
- create three circles using D3
- SVG path movement on mousedown event to mouse click point
- d3 beeswarm chart - modify to pyramid-shaped stacking
- D3 selection.join() practical example
- c3 time series scatter chart, time data in y axis