There is declared variable inside the anonymous function, which when returns that variable. Problem is that I can't seem to use that variable, because when I try to return it firebug says, that: TypeError: myData is undefined .
This is my code:
select("circle")
.transition()
.attr("r", function(d) {
var myData = d3.select(this).datum();
return myData[0];
} )
.duration(1000);
That return myData[0]; does indeed return first array element, however my animation takes less than 1 second which means that .duration(1000); doesn't get called, because there is an error in that return myData[0]; , which is kind of puzzling.
That's how I attach data to that circle prior the attempt to animate it:
var valuesMatrix = [];
valuesMatrix[0] = [35, 21, 45, 71, 51, 32];
d3.selectAll("circle")
.data(valuesMatrix);
Why return myData[0]; is considered like undeclared even though it returns valid value.
Update. Press on rectangle to see circle animation:
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
svgContainer.append("circle")
.attr("cx", 40)
.attr("cy", 40)
.attr("r", 20);
var valuesMatrix = [];
valuesMatrix[0] = [35, 21, 45, 71, 51, 32];
svgContainer.selectAll("circle")
.data(valuesMatrix);
svgContainer.append("rect")
.attr("x", 90)
.attr("y", 10)
.attr("width", 80)
.attr("height", 20)
.on("click", function(d) {
var selectedGroups = d3.selectAll("circle")
.transition()
.attr("r", function(d) {
var myData = d3.select(this).datum();
// return d[0];
return myData[0];
} )
.duration(2000);
});
This Code is jsfiddle - ready.
It seems to be working
http://jsfiddle.net/regpast123/axkbLp45/2/
The error message suggests that you haven't bound any data to the element you're selecting. Furthermore, you can simplify the code:
.attr("r", function(d) { return d[0]; });
Related
For example, I need to calculate a Math.sqrt of my data for each attr, how can I calculate only one time the Math.sqrt(d)?
var circle = svgContainer.data(dataJson).append("ellipse")
.attr("cx", function(d) {
return Math.sqrt(d) + 1
})
.attr("cy", function(d) {
return Math.sqrt(d) + 2
})
.attr("rx", function(d) {
return Math.sqrt(d) + 3
})
.attr("ry", function(d) {
return Math.sqrt(d) + 4
});
Has any elegant/performative mode? I'm thinking this way:
var aux;
var circle = svgContainer.data(dataJson).append("ellipse")
.attr("cx", function(d) {
aux = Math.sqrt(d);
return aux + 1
})
.attr("cy", function(d) {
return aux + 2
})
.attr("rx", function(d) {
return aux + 3
})
.attr("ry", function(d) {
return aux + 4
});
An underestimated feature of D3 is the concept of local variables which were introduced with version 4. These variables allow you to store information on a node (that is the reason why it is called local) independent of the data which might have been bound to that node. You don't have to bloat your data to store additional information.
D3 locals allow you to define local state independent of data.
Probably the major advantage of using local variables over other approaches is the fact that it smoothly fits into the classic D3 approach; there is no need to introduce another loop whereby keeping the code clean.
Using local variables to just store a pre-calculated value is probably the simplest use case one can imagine. On the other hand, it perfectly illustrates what D3's local variables are all about: Store some complex information, which might require heavy lifting to create, locally on a node, and retrieve it for later use further on in your code.
Shamelessly copying over and adapting the code from Gerardo's answer the solution can be implemented like this:
var svg = d3.select("svg");
var data = d3.range(100, 1000, 100);
var roots = d3.local(); // This is the instance where our square roots will be stored
var ellipses = svg.selectAll(null)
.data(data)
.enter()
.append("ellipse")
.attr("fill", "gainsboro")
.attr("stroke", "darkslateblue")
.attr("cx", function(d) {
return roots.set(this, Math.sqrt(d)) * 3; // Calculate and store the square root
})
.attr("cy", function(d) {
return roots.get(this) * 3; // Retrieve the previously stored root
})
.attr("rx", function(d) {
return roots.get(this) + 3; // Retrieve the previously stored root
})
.attr("ry", function(d) {
return roots.get(this) + 4; // Retrieve the previously stored root
});
<script src="//d3js.org/d3.v4.min.js"></script>
<svg></svg>
Probably, the most idiomatic way for doing this in D3 is using selection.each, which:
Invokes the specified function for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
So, in your case:
circle.each(function(d){
//calculates the value just once for each datum:
var squareRoot = Math.sqrt(d)
//now use that value in the DOM element, which is 'this':
d3.select(this).attr("cx", squareRoot)
.attr("cy", squareRoot)
//etc...
});
Here is a demo:
var svg = d3.select("svg");
var data = d3.range(100, 1000, 100);
var ellipses = svg.selectAll(null)
.data(data)
.enter()
.append("ellipse")
.attr("fill", "gainsboro")
.attr("stroke", "darkslateblue")
.each(function(d) {
var squareRoot = Math.sqrt(d);
d3.select(this)
.attr("cx", function(d) {
return squareRoot * 3
})
.attr("cy", function(d) {
return squareRoot * 3
})
.attr("rx", function(d) {
return squareRoot + 3
})
.attr("ry", function(d) {
return squareRoot + 4
});
})
<script src="//d3js.org/d3.v4.min.js"></script>
<svg></svg>
Another common approach in D3 codes is setting a new data property in the first attr method, and retrieving it latter:
.attr("cx", function(d) {
//set a new property here
d.squareRoot = Math.sqrt(d.value);
return d.squareRoot * 3
})
.attr("cy", function(d) {
//retrieve it here
return d.squareRoot * 3
})
//etc...
That way you also perform the calculation only once per element.
Here is the demo:
var svg = d3.select("svg");
var data = d3.range(100, 1000, 100).map(function(d) {
return {
value: d
}
});
var ellipses = svg.selectAll(null)
.data(data)
.enter()
.append("ellipse")
.attr("fill", "gainsboro")
.attr("stroke", "darkslateblue")
.attr("cx", function(d) {
d.squareRoot = Math.sqrt(d.value);
return d.squareRoot * 3
})
.attr("cy", function(d) {
return d.squareRoot * 3
})
.attr("rx", function(d) {
return d.squareRoot + 3
})
.attr("ry", function(d) {
return d.squareRoot + 4
});
<script src="//d3js.org/d3.v4.min.js"></script>
<svg></svg>
PS: by the way, your solution with var aux will not work. Try it and you'll see.
I'm trying to figure out why my tweening numbers (counting up or down) code in Version 4 of D3 doesn't function any more.
Here is my code:
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d.value);
return function(t) {
this.textContent = form(i(t));
};
});
The console.log tells me that the interpolation works fine.
So what has changed? And how do I get it to work?
Thanks for your help.
The problem here is just this inside the inner function, which will no longer work as it worked in v3.
Let's prove it. Have a look at the console here, using D3 v3, this is the DOM element:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<p></p>
Now the same snippet, using D3 v4... this is now the window object:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>
Solution: keep the reference to this in the outer function as a variable (traditionally named self, but here I'll name it node):
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
//keep a reference to 'this'
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
//use that reference in the inner function
};
});
Here is your code with that change only:
var widthpie = 250,
heightpie = 300,
radius = Math.min(widthpie, heightpie) / 2;
var data = [{
antwort: "A",
value: 0.5
}, {
antwort: "B",
value: 0.4
}];
var form = d3.format(",%");
var body4 = d3.select("#chart1");
var svg4 = body4.selectAll("svg.Pie")
.data(data)
.enter()
.append("svg")
.attr("width", widthpie)
.attr("height", heightpie)
.append("g")
.attr("transform", "translate(" + widthpie / 2 + "," + heightpie / 2 + ")");
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
};
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart1"></div>
PS: I'm using Firebug in the snippets because S.O. snippet don't log the window object correctly.
The problem is caused by a change which is not documented in the changelog. D3 v3 calls the inner function returned by the callback passed to transition.tween() on every tick passing the current node as the this context:
tweens[--n].call(node, e);
As of v4, however, this is no longer the case when the inner function is called:
tween[i].call(null, t);
Passing null to that function will be replaced with the global object. In this case this in your function no longer points to current element as was true for v3. The remedy was already been laid out by Gerardo in his answer and is even suggested by the documentation on v4:
transition.tween("attr.fill", function() {
var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue");
return function(t) {
node.setAttribute("fill", i(t));
};
});
Hence, you need a closure to keep a reference to the current element as it is referenced as this in the callback provided to transition.tween().
i thing i copy this code i dont know where, if any one knew just give referance. i use this to add transition to path, i hope this give you an idea
Use this to append the transition
.transition()
.duration(2000)
.attrTween("stroke-dasharray", tweenDash)
this the function
function tweenDash() {
return function(t) {
var l = path.node().getTotalLength();
interpolate = d3.interpolateString("0," + l, l + "," + l);
//t is fraction of time 0-1 since transition began
var p = path.node().getPointAtLength(t * l);
return interpolate(t);
}
}
I am a very beginner programmer (emphasis on very). I am trying to figure out how to iterate through an array of colors in order to make three rectangles of different colors. Here is my code so far:
var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];
var svg = d3.select("body").append("svg")
.attr("width","2000").attr("height","400");
svg.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("fill", function(d, i) { return colors*i}) //the line of code in question
.attr("x", function(d,i) { return 70*i + 50; })
.attr("y", function(d,i) { return d*15; })
.attr("height", function(d,i) { return 500; })
.attr("width", "50");
//code end
As you can see, I've been trying to use function(d, i) to iterate through array colors, unsuccessfully. Full disclosure: the above code was created for a class, but this particular question is not part of the assignment. I'm trying to go just a tiny bit beyond the assignment.
The other answer is right, colors[i] will give you your colors, so it deserves the checkmark. The fix in that answer will give you:
var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];
var svg = d3.select("body").append("svg")
.attr("width","2000").attr("height","400");
svg.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("fill", function(d, i) { return colors[i]})
.attr("x", function(d,i) { return 70*i + 50; })
.attr("y", function(d,i) { return d*15; })
.attr("height", function(d,i) { return 500; })
.attr("width", "50");
//code end
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
But, looking at the results, the first bar is the tallest, but has the smallest data value. All bars are 500 pixels high, each has a part that is below the edge of the SVG.
I thought I'd just point out a couple potential improvements on your code:
The use of function(d,i) is only necessary when grabbing either the current element in your data array (d) or the current increment (i), so for:
.attr("height", function(d,i) { return 500; }) you can use: .attr('height',500);
But, I doubt you want all items to be 500 pixels tall (especially as your svg is only 400 pixels tall). This will be especially apparent if you have margins.
So, for height, we can use the formula you are currently using for your y coordinate:
.attr("height", function(d,i) { return d*15; })
Now, we have to have the bars end at the same point by manipulating the position of the top of each rectangle:
(go up d*15 pixels from the bottom of the svg (which is at 400), in svg coordinate space 0 is at the top):
.attr("y", function(d,i) { return 400 - d*15; })
Which gives you:
var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];
var svg = d3.select("body").append("svg")
.attr("width","2000").attr("height","400");
svg.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("fill", function(d, i) { return colors[i]})
.attr("x", function(d,i) { return 70*i + 50; })
.attr("y", function(d,i) { return 400-d*15; })
.attr("height", function(d,i) { return d*15; })
.attr("width", "50");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
Lastly,
Quotations enclose strings, but if you are using numbers then you can drop them:
This: .attr("width", "50"); can be .attr("width",50);
Have you tried using colors[i] instead of colors*i?
That will allow you to access the value in place i.
(colors[1] will be 'green', colors[0] will be 'red' etc)
I am not sure what's going on, but I have 2 very simple examples set up to show what I am asking.
Both examples have a 'g' that contains a 'rect' and 'text'.
In the 1st example, I am setting up drag on the 'g' itself, i.e., if you mousedown anywhere in that group and drag, it will drag the entire thing (both 'rect' and 'text') around the viewpoint.
http://jsfiddle.net/wup4d0nx/
var chart = d3.select("body").append("svg")
.attr("height", 500)
.attr("width", 500)
.style("background", "lightgrey");
var group = chart.selectAll("g")
.data(["Hello"])
.enter()
.append("g")
.attr("id", function (d) { return d;});
var rect = group.append("rect")
.attr("stroke", "red")
.attr("fill", "blue")
.attr("width", 200)
.attr("height", 200)
.attr("x", 10)
.attr("y", 10);
var label = group.append("text")
.attr("x", 40)
.attr("y", 40)
.attr("font-size", "22px")
.attr("text-anchor", "start")
.text(function (d) { return d;});
// Set up dragging for the entire group
var dragMove = function (d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
};
var drag = d3.behavior.drag()
.origin(function (data) {
var element = d3.select("#" + data);
return {
x: d3.transform(element.attr("transform")).translate[0],
y: d3.transform(element.attr("transform")).translate[1]
};
})
.on("drag", dragMove);
group.call(drag);
In the 2nd example, which doesn't work and is what I am interested in, I want ONLY THE TEXT to be something the user can grab to drag the entire group around.
I tried many attempts. Some don't work at all, some work but flicker like the example I provide here:
http://jsfiddle.net/9xeo7ehf/
var chart = d3.select("body").append("svg")
.attr("height", 500)
.attr("width", 500)
.style("background", "lightgrey");
var group = chart.selectAll("g")
.data(["Hello"])
.enter()
.append("g")
.attr("id", function (d) { return d;});
var rect = group.append("rect")
.attr("stroke", "red")
.attr("fill", "blue")
.attr("width", 200)
.attr("height", 200)
.attr("x", 10)
.attr("y", 10);
var label = group.append("text")
.attr("x", 40)
.attr("y", 40)
.attr("font-size", "22px")
.attr("text-anchor", "start")
.text(function (d) { return d;});
// Set up dragging for the entire group USING THE LABEL ONLY TO DRAG
var dragMove = function (d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this.parentNode).attr("transform", "translate(" + x + "," + y + ")");
};
var drag = d3.behavior.drag()
.origin(function (data) {
var element = d3.select("#" + data);
return {
x: d3.transform(element.attr("transform")).translate[0],
y: d3.transform(element.attr("transform")).translate[1]
};
})
.on("drag", dragMove);
label.call(drag);
What's going on with this that it flickers and what am I doing wrong?
Any help would be greatly appreciated!
Thanks!
I'm not sure exactly why it is flickering (as I am not too familiar with D3), but one way to get it to stop is to use the source event for D3:
// 50 is the offset x/y position you set for your text
var x = d3.event.sourceEvent.pageX - 50;
var y = d3.event.sourceEvent.pageY - 50;
Edit: While the above code works, it causes the box to initially "jump" to the coordinates of the text, A better fix would be to take your first example and just filter our events that aren't executed on the text element. Try putting the following at the top of the dragMove method:
if(d3.event.sourceEvent.target.nodeName !== 'text') {
return;
}
Try d3.event.sourceEvent.stopPropagation(); inside on-drag function
I'm trying to plot circles from data in my csv file, but the circles are not appearing on the svg canvas. I believe the problem stems from how I load in the data (it gets loaded as an array of objects), but I'm not quite sure how to figure out what to do next.
Based off this tutorial: https://www.dashingd3js.com/svg-text-element
D3.js code:
var circleData = d3.csv("files/data.csv", function (error, data) {
data.forEach(function (d) {
d['KCComment'] = +d['KCComment'];
d['pscoreResult'] = +d['pscoreResult'];
d['r'] = +d['r'];
});
console.log(data);
});
var svg = d3.select("body").append("svg")
.attr("width", 480)
.attr("height", 480);
var circles = svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function (d) { return d.KCComment; })
.attr("cy", function (d) { return d.pscoreResult; })
.attr("r", function (d) { return d.r; })
.style("fill", "green");
var text = svg.selectAll("text")
.data(circleData)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return d.KCComment; })
.attr("y", function(d) { return d.pscoreResult; })
.text(function (d) { return "( " + d.KCComment + ", " + d.pscoreResult + " )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
What the CSV looks like:
fmname, fmtype, KCComment, pscoreResult, r
test1, type1, 7.1, 8, 39
test2, type2, 1.2, 3, 12
You should have the circle-drawing code within the d3.csv function's callback, so it's only processed when the data is available.
d3.csv("data.csv", function (error, circleData) {
circleData.forEach(function (d) {
d['KCComment'] = +d['KCComment'];
d['pscoreResult'] = +d['pscoreResult'];
d['r'] = +d['r'];
});
console.log(circleData);
// Do the SVG drawing stuff
...
// Finished
});
Also note that instead of setting var circleData = d3.csv(... you should just define it in the callback function.
Here's a plunker with the working code: http://embed.plnkr.co/fzBX0o/preview
You'll be able to see a number of further issues now: both circles are overlapping and only one quarter is visible. That's because your KCComment and pscoreResult values used to define the circles' cx and cy are too small. Try multiplying them up so that the circles move right and down and are a bit more visible! Same is true of the text locations, but I'll leave those problems for you to solve