Can i use style fill and class with fill also ?
bar.selectAll("rect")
.data(function(d) { return d.valores; })
.enter().append("rect")
.attr("class", function (d) { return ((d.star == true) ? "bar_star" : "bar"); }) //added line
.attr("x", function (d) { return x1(d.name); })
.attr("width", x1.rangeBand())
.attr("y", height)
.attr("height", 0)
.transition()
.duration(500)
.attr("y", function (d) { return y(d.value); })
.attr("height", function (d) { return height - y(d.value); })
.attr("value", function(d) { return d.name; })
.style("fill", function(d) { return color(d.name); }); //before
bar.on("mouseover", tip.show);
bar.on("mouseout", tip.hide);
My classes is :
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
If I try directly in the
.on(mouseover)
it does not work.My fill is invisible.When I remove the line
.style("fill", function(d) { return color(d.name); });
Nothing works neither the tooltip nor the hover. What should I do ?
Thank you for answring,
Related
I'm trying to show a label on each circle of the svg and change them every time the select box changes. Something shows up, but it's unreadable and I don't know what's wrong.
Here's the js bin: http://jsbin.com/legexovicu/edit?html,output
And this is the relevant code:
var pathContainers = svg.selectAll('g.line')
.data(operacion);
pathContainers.enter().append('g')
.attr('class', 'line')
.attr("style", function(d) {
return "stroke: " + color_hash[operacion.indexOf(d)][1];
});
pathContainers.selectAll('path')
.data(function (d) { return [d]; }) // continues the data from the pathContainer
.enter().append('path')
.attr('d', d3.svg.line()
.x(function (d) { return xScale(d.x); })
.y(function (d) { return yScale(d.y); })
);
pathContainers.selectAll('text')
.data(function (d) { return d; })
.enter().append('text')
.attr('x', function (d) { return xScale(d.x) + 20; })
.attr('y', function (d) { return yScale(d.y) + 25; })
.text( function (d) { return d.name; })
.attr("text-anchor", "middle")
.attr("font-family", "arial")
.attr("font-size", "5px")
.attr("fill", "white")
.attr('background','white');
// add circles
pathContainers.selectAll('circle')
.data(function (d) { return d; })
.enter().append('circle')
.attr('cx', function (d) { return xScale(d.x); })
.attr('cy', function (d) { return yScale(d.y); })
.attr('r', 2)
.style('fill', 'white')
.attr("title", function(d) { return d.name });
If I look the generated html, I see something like this:
<text x="70" y="75" text-anchor="middle" font-family="arial" font-size="5px" fill="white" background="white">Consti</text>
But I end up getting something illegible.
Add this to your texts:
.style("stroke-width", 1);
Here is your JSBin: http://jsbin.com/lujuhupata/1/edit?html,output
My tooltip should hide if the mouse is over the data 'white'.. But i don't know how to do this
Here is my code:
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); })
.call(d3.helper.tooltip()
.attr({class: 'tooltip2'})
.text(function(d, i){ return d.name + ': '+ (-((d.y0) - (d.y1))) ; })
);
dataseries:
State, White , FA Nicht gebucht, FA gebucht
07.10.2014,24,1,0
08.10.2014,24,1,0
13.10.2014,22,3,0
14.10.2014,24,1,0
15.10.2014,21,4,0
16.10.2014,15,10,1
17.10.2014,12,13,0
20.10.2014,17,8,0
I have used the chart example as given here:
http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c
However, when trying to plot the data points over the individual lines, it doesnt show up. The code is given here:
var cities = svg.selectAll(".city")
.data(data, function(d) { return d.key; })
.enter().append("g")
.attr("class", "city");
cities.append("path") //adding paths
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.key); });
cities.selectAll(".dot") //adding dots
.data(data, function(d) { return d.key; })
.enter().append("circle")
.attr("class","dualLineChart-dot1")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.values); })
.attr("r", 3.5)
.on("mouseover", function(d){
d3.select(this).style("fill", "blue");
})
.on("mouseout", function(){
d3.select(this).style("fill", "white");
});
the CSS part is as follows:
.line {
fill: none;
stroke-width: 1.5px;
}
.dot {
fill: white;
stroke: steelblue;
stroke-width: 1.5px;
}
You'll need to make a few changes to get this to work:
Make sure your class names are consistent: Change cities.selectAll(".dot") to cities.selectAll(".dualLineChart-dot1") to match with the class attr you assign a few lines later
The y-accessor is d.temp, rather than d.values, so you should have .attr("cy", function(d) { return y(d.temp); }) to get the y-value
Most importantly, you should change the way you get the data for the points. Because the cities variable already is an array of data (split up by city), you just need to access it for your points using .data(function(d) { return d.values; }), instead of using .data(data, function(d) { return d.values; })
Here's the working code:
cities.selectAll(".dualLineChart-dot1") //adding dots
.data(function(d) { return d.values; })
.enter().append("circle")
.attr("class","dualLineChart-dot1")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.temp); })
.attr("r", 3.5)
.on("mouseover", function(d){
d3.select(this).style("fill", "blue");
})
.on("mouseout", function(){
d3.select(this).style("fill", "white");
});
Making application with phonejs, using d3.js with force layout. I want to display images as node of d3.
Here is how node is created:
node = container.append("g").selectAll("image.node")
.data(nodes_edges_json.nodes)
.append("svg:image")
.attr("class", "node")
.attr("xlink:href", function(nodeObj) { return nodeObj.image; })
.attr("width", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("height", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("x", function(nodeObj) { return setXYCoordinates("x", nodeObj); })
.attr("y", function(nodeObj) { return setXYCoordinates("y", nodeObj); })
.attr("title",function(nodeObj) { return nodeObj.name;})
.call(drag);
Currently it does not display images in place of nodes.
You may need to add an enter()
node = container.append("g").selectAll("image.node")
.data(nodes_edges_json.nodes).enter() // <-----------------HERE
.append("svg:image")
.attr("class", "node")
.attr("xlink:href", function(nodeObj) { return nodeObj.image; })
.attr("width", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("height", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("x", function(nodeObj) { return setXYCoordinates("x", nodeObj); })
.attr("y", function(nodeObj) { return setXYCoordinates("y", nodeObj); })
.attr("title",function(nodeObj) { return nodeObj.name;})
.call(drag);
I am trying to have many fixed nodes in this graph.
I tried the mashup codes from this page.
But it doesn't work.
// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
.data(force.links())
.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("x", function(d) {
if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
else { return (d.target.x + (d.source.x - d.target.x)/2); }
})
.attr("y", function(d) {
if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
else { return (d.target.y + (d.source.y - d.target.y)/2); }
})
.attr("fill", "Maroon")
.style("font", "normal 12px Arial")
.attr("dy", ".35em")
.text(function(d) { return d.linkName; });
force.on("tick", function() {
node[0].x = w / 2;
node[0].y = h / 2;
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
Nothing is displayed, just a blank page.
What could be the cause of this?
You forgot to append to the enter selection. Add enter() before append("text").