I'm trying to assign different elements different attribtsty. But everyone is given the same (last) attribute. What's the matter?
for (var i = 1; i < 12; i++) {
d3.select("#id_" + i)
.text(parseFloat(data[i - 1] / 1000000).toFixed(2))
.on("mouseover", function (d) {
d3.select("#tooltip")
.style("left", "200px")
.style("top", d3.event.pageY - 30 + "px")
.select("#info")
.html("<b>" + keys[i - 2] + "</b>");
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
d3.select("#tooltip").classed("hidden", true);
});
}
Link: JSFIDDLE
Try this:
for (var i = 1; i < 12; i++) {
(function (i) {
d3.select("#id_" + i)
.text(parseFloat(data[i - 1] / 1000000).toFixed(2))
.on("mouseover", function (d) {
d3.select("#tooltip")
.style("left", "200px")
.style("top", d3.event.pageY - 30 + "px")
.select("#info")
.html("<b>" + keys[i - 2] + "</b>");
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
d3.select("#tooltip").classed("hidden", true);
});
})(i)
}
The code that you have written is an example of imperative programming, where you tell the computer how to do something.
D3 is an example of declarative programming, where you tell the computer what to do, and let the computer decide how to do it.
D3 was not designed to loop through to assign values like in your question. Instead of loops and conditionals and other "hows", you should focus on what you want to happen.
To do this, you should use what is called "data binding", where you bind your dataset to the svg to draw your text (here is a beginner tutorial/simple explanation http://bost.ocks.org/mike/circles/)
In relation to your problem, you should put your data in one object like this:
var data = [
["key": 1, "value": 0.0, "x": 84, "y": 310],
...
];
You then bind this data to the svg element, where you can then tell D3 to draw your text with those attributes without specifiying the exact implementation.
svg.selectAll("text")
.data(data)
.enter()
.attr("x", function(d, i) {
return d.x;
})
.attr("y", function(d, i) {
return d.y;
})
...
.on("mouseover", function(d, i) {
d3.select("#tooltip")
.style("left", "200px")
.style("top", d3.event.pageY - 30 + "px")
.select("#info")
.html("<b>" + d.key + "</b>");
d3.select("#tooltip").classed("hidden", false);
})
...
The function function(d, i) gives the actual object d as an argument, and i as the object's location in the array.
Your issue with the tooltips is that i is the same value (12) no mater which element is moused over. To see this, you can log i in your mouseover handler. There are a few ways you could recover the index of the element that is moused over. One of the easiest (though perhaps not cleanest) would be to recover it from the element ID.
for (var i = 1; i < 12; i++) {
d3.select("#id_" + i)
.text(parseFloat(data[i - 1] / 1000000).toFixed(2))
.on("mouseover", function (d) {
var index = this.id.slice(3,9); //ADDED THIS LINE
d3.select("#tooltip")
.style("left", "200px")
.style("top", d3.event.pageY - 30 + "px")
.select("#info")
.html("<b>" + keys[index - 2] + "</b>"); //USE THE INDEX
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
d3.select("#tooltip").classed("hidden", true);
});
}
I also suspect that you mean keys[index-1] not keys[index-2]. The latter goes out of bounds of the array.
Related
I am trying to set a 'selectedLabel' when I click on my pie chart segments for use further in my component but I running into a 'this.set() is not a function' error that I have not seen before.
This answer suggests that the object I am trying to set the property for is not an Ember object and therefore needs to be changed with Ember.set(object, 'property' value) but this returns a null error.
I am using both this.get and this.set methods elsewhere in the same component so I'm not sure if there is a problem with his specific object or if I have a scoping issue.
Code:
let g = svg.selectAll("arc")
.data(mpie)
.enter().append("g")
.attr("class", "arc")
g
.on("mousemove", function(d) {
var mouseVal = mouse(this);
div
.html("Items: " + d.data.count + "</br>" + "Date: " + d.data.label)
.style("left", (event.pageX + 12) + "px")
.style("top", (event.pageY - 10) + "px")
.style("opacity", 1)
.style("display", "block");
})
.on("mouseout", function() {
div.html(" ").style("display", "none");
})
//attempt to set 'selectedLabel' property
.on("click", function(d) {
this.set('selectedLabel', d.data.label)
})
Console logging 'this' in the click function gives me the correct segment of the pie chart.
Wrong context. If you want to preserve the context in a function use an arrow function and this will be the outer object.
```
g.on("click", (d)=> {
this.set('selectedLabel', d.data.label)
})
```
I am trying to implement the FishEye lens (Cartesian) in my scatterplot.
I am trying to follow this approach, but apparently my selector already fails.
I have my FishEye defined as
var fisheye = d3.fisheye.circular().radius(120);
svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
console.log("here " + points.selectAll("circle").length);
points.selectAll("circle").each(function(d) {
console.log("aaa");
d.fisheye = fisheye(d);
/*points.selectAll("circle")
.each(function(d) {
console.log("???");
this.attr("cx", function(d) { return d.fisheye.x; })
this.attr("cy", function(d) { return d.fisheye.y; })
this.attr("r", function(d) { console.log("hype"); return 10; });
}); */
});
});
and my points is defined as
points = svg.append("g")
.attr("class", "point")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { // Set the x position using the x-scale
return x(d.x);
})
.attr("cy", function(d) { // Set the y position using the y-scale
return y(d.y);
})
.attr("r", 5) // Set the radius of every point to 5
.on("mouseover", function(d) { // On mouse over show and set the tooltip
if(!isBrushing){
tooltip.transition()
.duration(200)
.style("opacity", 0.9);
tooltip.html(d.symbol + "<br/> (" + parseFloat(x(d.x)).toFixed(4)
+ ", " + parseFloat(y(d.y)).toFixed(4) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
})
.on("mouseout", function(d) { // on mouseout, hide the tooltip.
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
The console.log with "here" is spamming when I am moving the mouse, and shows the correct amount. Hwoever, the each loop is never executed as I do not see "aaa". I have also tried to just use selectAll("circle") but that doesn't work either.
What am I doing wrong and how can I get my FishEye to work?
I am trying to make an interactive pie chart that reacts to mouse clicks. At the moment I made it possible for a tooltip to come up once a pie slice is clicked on. But how can I make it disappear if the user clicks again on the same slice?
.on("click", function(d) {
tooltip.transition()
.duration(450)
.style("opacity", 0.7);
tooltip.html("<b>" + d.name + ": " + d.value + "</b>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY-20) + "px");
});
If the data in your selection are objects, then you can store within each datum whether it's selected or not. For example,
.on("click", function(d, i) {
if (!d.selected){
tooltip.transition()
.duration(350)
.style("opacity", 0.9);
tooltip.html("<b>" + stats[i].status + ": " + d.value + "</b>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY-margin*0.8) + "px");
d.selected = true;
// deselect all other arcs
arcs.each(function(d, j){
if (i != j) d.selected = false;
});
}
else {
tooltip.transition()
.duration(200)
.style("opacity", 0);
d.selected = false;
}
});
Note that this ensures that all other arcs are deselected when you select a new arc.
I am trying to create a scatter plot and want to show tooltips by clicking on each point. The tooltip will disappear only when the point is deselected (clicked again). Currently, selected points will have a black border with r=8. Deselected points have no visible black border with r=4.5.
With the code below, when I deselect the points, the tooltip won't go away. How can I link the tooltip to each point? Thanks!
.on("click", function (d) {
var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");
if (d3.select(this).attr("r") < 8) {
d3.select(this)
.style("stroke", "black")
.style("stroke-width", "2px")
.style("stroke-opacity", 1)
.attr("r", 8);
clickTooltip.style("opacity", 0.62);
var clickTooltipText = "display";
clickTooltip.html(clickTooltipText)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 40) + "px");
} else {
d3.select(this)
.attr("r", 4.5)
.style("stroke-opacity", 0);
clickTooltip.style("opacity", 0);
}
}
You are appending a new element every time the click handler is called. Instead, create the element once and then select it:
var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");
.on("click", function (d) {
if (d3.select(this).attr("r") < 8) {
// etc
I figured it out. I am posting my answer here in case anyone is interested. The idea is to add an ID to each tooltip div. Later we can use JQuery to remove by ID.
.on("click", function (d) {
var pointID = "point_" + d3.select(this).attr("cx").replace(".", "_") + "_" + d3.select(this).attr("cy").replace(".", "_");
var clickTooltip = d3.select("#data_visualization")
.append("div")
.attr("id", pointID)
.attr("class", "click_tooltip");
if (d3.select(this).attr("r") < 8) {
d3.select(this)
.style("stroke", "black")
.style("stroke-width", "2px")
.style("stroke-opacity", 1)
.attr("r", 8);
clickTooltip.style("opacity", 0.62);
var clickTooltipText = "display";
clickTooltip.html(clickTooltipText)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 40) + "px");
} else {
d3.select(this)
.attr("r", 4.5)
.style("stroke-opacity", 0);
d3.select("#" + pointID).remove();
}
}
I have an issue and I really need your help.
I have a realtime graph with a vertical bar that moves with cursor and i want it to show the value of the graph (d.time and d.value) when the cursor points to. http://jsfiddle.net/QBDGB/54/ i have two series of data (data1s and data2s) that is generated randomly and I put the time in which the data is generated in "time" variable as you can see:
now = new Date(Date.now() - duration);
var data1 = initialise();
var data2 = initialise();
//Make stacked data
var data1s = data1;
var data2s = [];
for(var i = 0; i < data1s.length; i++){
data2s.push({
value: data1s[i].value + data2[i].value,
time: data2[i].time
}
)};
function initialise() {
var arr = [];
for (var i = 0; i < n; i++) {
var obj = {
time: Date.now(),
value: Math.floor(Math.random() * 100)
};
arr.push(obj);
}
return arr;
}
When I hover around the graph I want the tooltip show the time and value but it does not recognize it and show "undefined" since I do not know how to pass my datasets (data1s and data2s) so "mouseover function can recognize which data to show! This is how the tooltip functions are made and call from "path1" and "path2".
function mouseover() {
div.transition()
.duration(500)
.style("opacity", 1);
}
function mousemove(d) {
div
.text( d.time+ ", " + d.value)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY ) + "px");
}
function mouseout() {
div.transition()
.duration(500)
.style("opacity", 1e-6);
}
var path1 = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data1s])
.attr("class", "line1")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var path2 =svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data2s])
.attr("class", "line2")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
Do you have any idea of what to do? i think i need to add
svg.selectAll("path1")
.attr("opacity", 1)
or svg.selectAll("datas1")
.attr("opacity", 1)
Somewhere! but i do not know how..
Thank you,
Update your mouseover function as:
function mousemove(d) {
div
.text( d[0].time+ ", " + d[0].value)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY ) + "px");
}
Include the index to the object 'd'.
Hope that helps.