How can I replace below lines with the new version of D3 API?
I have already replaced scale.linear() with scaleLinear()
var xRange = d3.scaleLinear()
.domain([OIResults.min,OIResults.max]).range([40, 360]);
var yRange = d3.scaleLinear()
.domain(y_domain).range([360, 40]);
Below Lines need to be replaced according to the new API:
var xAxis = d3.svg.axis().scale(xRange).tickFormat(function(d) { return d.x;});
var yAxis = d3.svg.axis().scale(yRange).orient("left");
The D3 v4 API is here. According to the changelog:
D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.
Therefore, those lines should be:
var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
var yAxis = d3.axisLeft(yRange);
PS: I'm assuming that you want the ticks to be below the axis, which is normally the case, since you didn't show the orient in your original lines.
PPS: At the time of the writing the linked documentation applies to D3 v4. Caveat, lector: that can change at any time (see comments below).
Related
I have data that show both the number of items sold as well as the value of those items. I have a dynamic and interactive line chart that switches between the two data sets. I'd like to format the tick marks on the axis so that dollar signs appear on the axis where appropriate.
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y)
svg.append("g")
.attr("class","Yaxis")
y.domain([0, d3.max(data, function(d) { return d.number }) ]);
svg.selectAll(".Yaxis")
.transition()
.duration(3000)
.call(yAxis);`
The entire pen is available here: https://codepen.io/cyrusobrien/full/NWdPRLp
Replace D3 tickFormat with your custom one:
const d3Format = d3.format(".2s");
const customFormat = value => `$${d3Format(value)}`;
const yAxis = d3.axisLeft().scale(y)
.tickFormat(customFormat)
I am using d3 graph library v4, There is a code which using the library d3 version3 not working with version4. Particularly the function is the following
d3.scale.category10().range()
what could be the replacement for the same in version 4
In D3 v4, d3.schemeCategory10 has to be used with an ordinal scale:
var color = d3.scaleOrdinal(d3.schemeCategory10);
So, to return the range:
var colorRange = d3.scaleOrdinal(d3.schemeCategory10).range();
console.log(colorRange);
<script src="https://d3js.org/d3.v4.min.js"></script>
Besides that, there are several new colours schemes, both discrete and continuous: https://github.com/d3/d3-scale-chromatic/blob/master/README.md
To translate the line above to D3 v4, replace it with the following:
d3.scaleOrdinal(d3.schemeCategory10).range()
See also the D3 v4 documentation on scales.
Try this
d3.v5
var colorRange = d3.scaleOrdinal(d3.schemeCategory10);
I try to dynamically change the number of ticks on an axis via an input field
// updated by an input field
var nNumberOfTicks;
function updatenumberofticks(nValue) { nNumberOfTicks = nValue; }
// definition of the axis
var xAxis = d3.svg.axis()
.orient('bottom')
.ticks(nNumberOfTicks)
.scale(xScale);
but it doesn't work. See here: https://jsfiddle.net/stefanooo/cn2xo56w/3/.
This example works perfectly when changing xmin. What do I have to change to make it work for the number of ticks also?
You need to give the updated number of ticks to the axis component after changing it, e.g.
d3.select("#numberofticks").on("change", function() {
updatenumberofticks(+this.value);
vis.select('.xaxis').transition().call(xAxis.ticks(+this.value));
});
Complete example here.
I have a Dimple.JS scatter plot with a time-based (in years) X-axis. I'd like (in a similar manner to this D3 question) to be able to shade in an arbitrary area (ideally the start and end positions wouldn't necessarily be data points in the series).
Is there an existing function that will let me supply a year and give me the X co-ordinate the correct position on the scale in the SVG, which I can then use the construct my rectangle (I tried to look at the source code to figure out how dimple does it's positioning...)?
Alternatively, if it's more practical to use points already plotted on the chart, what's the correct way to use d3.select with dimple to access a specific one? My series has a date field (dd/mm/yyyy) so I have SVG elements like this:
<circle id="All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__" class="series0 bubble All Wed_Mar_18_1931_00:00:00_GMT+0000_(GMT) " cx="465.0000000006503" cy="362.1714285714286" r="2" opacity="0.8" fill="#e90e0e" stroke="#c20b0b"></circle>
… my guess was I should use mySeries.shapes.select(id) to access that, but for:
mySeries.shapes.select("#All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__");
or (if I escape it, unless there's a silly syntax error):
mySeries.shapes.select("#All_Wed Mar\ 18\ 1931\ 00:00:00\ GMT+0000\ (GMT)__");
I get "Not a valid selector".
(Thanks)
You need to use a non-public method of the axes to do this, so it may not work this way in future versions (>1.1.5) however between you and me, I don't think the scale method of the axis is going to be disappearing any time soon.
The _scale method is the raw d3 scale method added once the draw method of the chart is called so it can convert the values for you. I've created a fiddle to illustrate the solution. This will need a little tweaking if you are dealing with negative values or log axes:
// Draw a simple chart
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "a":300, "b":2000, "c":"a" },
{ "a":400, "b":3000, "c":"b" },
{ "a":340, "b":2200, "c":"c" },
{ "a":300, "b":5000, "c":"d" }
];
var chart = new dimple.chart(svg, data);
var x = chart.addMeasureAxis("x", "a");
var y = chart.addMeasureAxis("y", "b");
chart.addSeries("c", dimple.plot.bubble);
chart.draw();
// Draw a grey region using the following co-ordinates
var fromX = x._scale(210),
toX = x._scale(320),
fromY = y._scale(2200),
toY = y._scale(3100)
svg.append("rect")
.attr("x", fromX)
.attr("y", toY)
.attr("width", toX - fromX)
.attr("height", fromY - toY)
.style("fill", "grey")
.style("opacity", 0.2);
Here's the fiddle: http://jsfiddle.net/T6ZDL/7/
I would like to create a dynamic graph with multiple (linear) axes. After the axes have been drawn, I would like (as new data arrives) to change the Data Domain and redraw/update the axes. Can I select the existing axis with D3 and do this or do I have to explicitly save each axis in my code? I hope my question is not confusing.
// init all Y-Axis
$.each(chart.YAxes, function (index) {
var yScale, yAxis;
yScale = d3.scale.linear().range([chartHeight, 0]);
yScale.domain([this.YMin, this.YMax]);
yAxis = d3.svg.axis()
.scale(yScale)
.ticks(10, this.Title)
.orient("left");
d3Chart.append("g")
.attr("class", "yAxis " + "y" + this.ID)
.call(yAxis);
......
// update Y-Axis (after new data arrives...)
var myYAxis = d3.select(".y" + yAxis.ID);
var myScale = myYAxis. **// get Scale ??**
myScale.domain([newYMin, newYMax]);
d3Chart.select(".y" + yAxis.ID)
.transition().duration(300).ease("sin-in-out")
.call(myYAxis);
thx...!
You need to keep references to the axis object so that you can call it again. Selecting the DOM element that contains it and calling that won't work. There are lots of examples on how to update axes, e.g. in this question.