score:1
The reason this doesn't work is because the 'minus' characters, despite appearing identical, are different unicode symbols.
Luckily, d3 provides a way to change the default minus character to whatever you choose using the formatLocale
function.]
'HYPHEN-MINUS' U+002D unicode character is recognized as a 'negative sign'.
// import {format} from 'd3-format' //do not directly import format with default settings
import { formatLocale} from "d3-format"
const format = formatLocale({ minus: "\u002D"}).format
let numberFormatter = d3.format(".3f");
let neg = -2.333;
let negString = "-2.333";
let d3negString = numberFormatter(neg);
console.log(d3negString) // "-2.333"
console.log(negString) // "-2.333"
console.log(typeof negString === typeof d3negString); // true
console.log(negString === d3negString); // true
console.log(isNaN(+negString)); // false
console.log(isNaN(+d3negString)); // false
The larger moral of the story is that d3-format's goal is NOT to round numbers - it is to make number look nice as text. To prevent problems, use Math.round()
or "-2.3333".toFixed(3) // => -2.333
to round numbers in javascript.
score:3
The change log of d3, shows that in version 2.0.0 the following was changed:
Change the default minus sign to the minus sign (−) instead of hyphen-minus (-).
In this thread on D3's github are some interesting comments:
D3 did use the minus sign originally, but people complained about that, too (e.g., #595), primarily because there was an expectation that d3.format would use the same symbol as JavaScript’s
number.toString
. The minus sign was thus replaced with hyphen-minus in 2.10.0 (da3131c, #756).
And:
This is now available as an opt-in by specifying the locale’s
minus
property. And I’m considering making the minus sign the default (again) in the next major version.
Source: stackoverflow.com
Related Query
- Why does converting a negative string into a number ( +"-2.333" ) return NaN, only when the string came from d3.format function?
- Why does d3.select() return array of array?
- Converting string time into milliseconds
- Why does this vanilla js function return different results in d3v3 and d3v4
- Why does d3.json return "null"?
- why does appending a foreignObject into an SVG break jquery ui's resize?
- Why javascript function return NaN value?
- why does it fail saying that d3 is not defined when served as string in webbrowser
- Why does this D3 closure not return the correct attribute
- Turn NaN into a number
- NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly
- 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?
- converting numbers on y axis to string with K for thousand d3.js
- Why does this D3 code add the <p> element outside the body, instead of inside it?
- Converting ctree output into JSON Format (for D3 tree layout)
- Why does my d3 force-directed graph not display edges?
- Having trouble converting a D3 v3 Force Directed graph into D3 v4 library implementation?
- What does .data(function(d) { return d; }) return in d3?
- Why does 'd3.select("svg") == d3.select("svg")' resolve to 'false'?
- Formatting Interpolated String or Number in d3
- Why does my angular component ignore my css file?
- D3 4.0+ does not create a global d3 variable when imported into Jupyter Notebook
- 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?
More Query from same tag
- D3: How to adjust SVG image path elements programmatically?
- Force layout dragging, objects are far away from the correct position
- How to create a stacked barchart using d3?
- Find centroid of topoJSON path and use it to position a circle in D3
- D3 animate an arbitrary svg along a path
- d3.js creating text arcs
- D3 how to create round axis and style options
- Adjust link start-end point according to node position in D3 graph
- Draw a frequency plot in d3 with JSON data
- Retrieving Keys from JSON Array key-value pair dynamically - Javascript
- How to loop through a d3 json treemap to get section nodes
- d3 + positioning data lables in bar chart + top, middle, bottom, center
- D3, is there any way to transition through an existing graph point by point?
- d3.js:vertical moving line's intersection point with line graph
- d3js v4 bubble chart - getting force/gravity effects back
- D3 mouse release event
- d3.js Day Hour Heatmap loads on server restart, but disappears when the page is refreshed
- Is it possible to get Angular2 and D3.js working together?
- Horizontal Bar chart using d3 js
- Omitting trailing zeroes / using sigfigs with d3.format()
- Dealing with multi dimensional data
- D3 JS creating a legend for a chart
- D3.js, multiply element <g>
- D3 Line Chart into bindPopup
- TopoJson makefile ignoring external properties file
- Error: <path> attribute d: Expected arc flag ('0' or '1')
- D3: hide voronoi strokes that fall 'in the sea'
- D3.js v4+ - How to determine specific location in force laypout
- Is it possible to dynamically change tooltip on c3 charts?
- Text label hides in circle d3