Jonah Jonah - 23 days ago 7
Javascript Question

Unexpected value translate parsing transform attribute

I am trying to visualize TSV data into a graph using d3.js. However I am getting the following errors on the console.


Unexpected value translate(NaN,450) parsing transform attribute.d3.v4.min.js:3:4262

Unexpected value translate(NaN,130.64516129032256) parsing transform attribute.d3.v4.min.js:3:4262

Unexpected value translate(NaN,72.5806451612903) parsing transform attribute.d3.v4.min.js:3:4262

Unexpected value translate(NaN,203.22580645161293) parsing transform attribute.d3.v4.min.js:3:4262

Unexpected value translate(NaN,319.35483870967744) parsing transform attribute.d3.v4.min.js:3:4262

Unexpected value translate(NaN,145.16129032258067) parsing transform attribute.d3.v4.min.js:3:4262


My code is as follows:

<style>

.axis--x path {
display: none;
}

.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>

var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y%m%d");

var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;

var products = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, price: d[id]};
})
};
});

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
d3.min(products, function(c) { return d3.min(c.values, function(d) { return d.price; }); }),
d3.max(products, function(c) { return d3.max(c.values, function(d) { return d.price; }); })
]);

z.domain(products.map(function(c) { return c.id; }));

g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Price, $");

var product = g.selectAll(".product")
.data(products)
.enter().append("g")
.attr("class", "product");

product.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });

product.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});

function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}

</script>


Below is a sample of TSV data:

Date Accessories_Scrap CG_Ingot Rod Sheet_Cutting Utensil_Scrap Wire_Scrap

20160701 106 129 132 123 115 127

20160702 106 129 132 123 115 127

20160703 106 128 132 123 115 127

20160704 106 128 132 123 115 127

20160705 106 128 132 123 115 127

Answer

Resolved the error by using scaleBand which should be used in d3 v4.

Instead of:

var x = d3.scaleTime().range([0, width]),

I have used:

var x = d3.scaleBand().rangeRound([0, width]),

Solution based on this answer: D3.js scaleOrdinal doesn't support rangeRoundBands method