I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should work in my world.
newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>");
Which does insert a text field into the SVG, it just doesn't display:
HTML:
<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red">
<textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea>
</rect>
I have a mouse over function which runs the following:
newRect = svg.append("rect")
.attr("x", xCor)
.attr("y", yCor)
.attr("width", 130)
.attr("height", 160)
.attr("fill", "red")
.attr("id", "rectLabel");
I think I should be doing this but it doesn't work. It just removes the g.node that I'm trying to append to.
newRect = $(this).enter().append("rect")
.attr("x", xCor)
.attr("y", yCor)
.attr("width", 130)
.attr("height", 160)
.attr("fill", "red")
.attr("id", "rectLabel");
Question:
Why doesn't my text appear? Ive tried .html, .textArea. I want a multiple line label so I don't think .text will work correct? Also, how should I be appending the rectangle?
A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
http://bl.ocks.org/mbostock/7341714
Multi-line labels are also a little tricky, you might want to check out this wrap function.
Have you tried the SVG text element?
.append("text").text(function(d, i) { return d[whichevernode];})
rect element doesn't permit text element inside of it. It only allows descriptive elements (<desc>, <metadata>, <title>) and animation elements (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)
Append the text element as a sibling and work on positioning.
UPDATE
Using g grouping, how about something like this? fiddle
You can certainly move the logic to a CSS class you can append to, remove from the group (this.parentNode)
Related
I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should work in my world.
newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>");
Which does insert a text field into the SVG, it just doesn't display:
HTML:
<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red">
<textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea>
</rect>
I have a mouse over function which runs the following:
newRect = svg.append("rect")
.attr("x", xCor)
.attr("y", yCor)
.attr("width", 130)
.attr("height", 160)
.attr("fill", "red")
.attr("id", "rectLabel");
I think I should be doing this but it doesn't work. It just removes the g.node that I'm trying to append to.
newRect = $(this).enter().append("rect")
.attr("x", xCor)
.attr("y", yCor)
.attr("width", 130)
.attr("height", 160)
.attr("fill", "red")
.attr("id", "rectLabel");
Question:
Why doesn't my text appear? Ive tried .html, .textArea. I want a multiple line label so I don't think .text will work correct? Also, how should I be appending the rectangle?
A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
http://bl.ocks.org/mbostock/7341714
Multi-line labels are also a little tricky, you might want to check out this wrap function.
Have you tried the SVG text element?
.append("text").text(function(d, i) { return d[whichevernode];})
rect element doesn't permit text element inside of it. It only allows descriptive elements (<desc>, <metadata>, <title>) and animation elements (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)
Append the text element as a sibling and work on positioning.
UPDATE
Using g grouping, how about something like this? fiddle
You can certainly move the logic to a CSS class you can append to, remove from the group (this.parentNode)
I am using a combination of Javascript+jQuery & d3.js to create custom Chart elements in SAP UI5 dashboard.
In my render function in gauge.ds, I have below code:
this.render = function()
{
this.body = d3.select("#" + this.placeholderName)
.append("svg:svg")
.attr("class", "gauge")
.attr("width", this.config.size + 10)
.attr("height", this.config.size + 10);
this.body.append("svg:circle")
.attr("cx", this.config.cx)
.attr("cy", this.config.cy)
.attr("r", this.config.raduis)
.style("fill", "#ccc")
.style("stroke", "#000")
.style("stroke-width", "0.5px");
this.body.append("svg:circle")
.attr("cx", this.config.cx)
.attr("cy", this.config.cy)
.attr("r", 0.9 * this.config.raduis)
.style("fill", "#fff")
.style("stroke", "#e0e0e0")
.style("stroke-width", "2px");
if (undefined != this.config.label)
{
var fontSize = Math.round(this.config.size / 12);
this.body.append("svg:text")
.attr("x", this.config.cx)
.attr("y", this.config.cy * 2 + fontSize / 2)
.attr("dy", fontSize / 2)
.attr("text-anchor", "middle")
.text(this.config.label)
.style("font-size", fontSize + "px")
.style("fill", "#333")
.style("stroke-width", "0px");
}
This creates a gauge and there is a label beside that gauge as shown in the image.
Now in my redraw function, I want to replace this label with a new text. I have written following code but it does not work as it writes over previous label and both are visible now on one another.
this.redraw = function(value)
{
var fontSize = Math.round(this.config.size / 12);
this.body.append("svg:text")
.attr("x", this.config.cx)
.attr("y", this.config.cy * 2 + fontSize / 2)
.attr("dy", fontSize / 2)
.attr("text-anchor", "middle")
.text(value)
.style("font-size", fontSize + "px")
.style("fill", "#333")
.style("stroke-width", "0px");
}
What code should I change to replace the text in the label instead of writing over it?
Thanks.
Give an ID to your text in the render function:
this.body.append("svg:text")
.attr("id", "textLabel")
//etc...
And select by class in the redraw function:
this.body.select("#textLabel")
.text(value)
If that is the only <text> element in the SVG selection, you could simply do...
this.body.select("text")
.text(value)
... without any ID or class.
A third solution is naming a selection outside both function, which you could change inside them.
Finally, two advices:
First, you said "I am using a combination of jQuery & d3.js". That's almost always a terrible idea. Don't do that.
Second, I'd advise you to mind the names of your variables and objects. You are referring to a SVG selection as body. Normally, we would expect that this.body refers to the <body>. Thus, change it to this.svg, it's clearer for whoever is reading your code.
possible duplicates: D3 text on mouseover
D3 donut chart text centering
but unsure what is happening in respect to my problem and quite stuck.
Im building a data visualization with many layouts. I am currently trying to make a piechart with text centered in the middle and whenever someone mouse overs the arcs, it displays the text of it in the center.
function GUP_PieRender() {
var svg = d3.select(targetDOMelement).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(dataset))
.enter().append("g")
.attr("class", "arc")
.on("mouseover", function(d) { d3.select("text").text(d.data.ResearchArea)}); //Problem area
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.ResearchArea); });
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle");
}
What it is doing instead is displaying the text in another D3 barchart layout that has text. So I must be calling the mouseover event too early and appending it to the last text element in that?
Can I get a remedy?
Thanks.
The problem here (inside your "mouseover" handler) is simply this:
d3.select("text")
When you do this, D3 selects the first text element it finds in that page. You don't want that, obviously.
Therefore, just do:
g.select("text")
That way, you only select text elements inside your g selection.
Alternatively, you can also do:
d3.select(this).select("text")
Since this in this context is the group element.
Here is a demo (I'm trying to imitate your code):
var data = ["foo", "bar", "baz"];
data.forEach(function(d) {
render(d);
})
function render(data) {
var svg = d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
var g = svg.selectAll(null)
.data([data])
.enter()
.append("g")
.on("mouseover", function(d) {
g.select("text").text(String)
})
.on("mouseout", function(d) {
g.select("text").text(null)
})
g.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 20);
g.append("text")
.attr("x", 25)
.attr("y", 20);
}
svg {
background-color: tan;
border: 1px solid darkgray;
margin-right: 10px;
}
circle {
fill: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
I am trying to get lines to change style on mouseover across multiple charts. In this example available here, I have two charts that both have five groups A,B,C,D,E. Each however is in a different csv (I am open to bringing the data in one csv or as one json array, but this is just how I have it set up right now).
I can get two charts each with five lines corresponding to the group. Using the below code, I get the hovered over line to change style whilst fading out the other lines in that chart.
// Fading and Selecting Lines
d3.selectAll('path.line.mainline')
.on("mouseover", function(d) {
var HoveredLine = this;
d3.selectAll('path.line.mainline').transition().duration(0)
.style('opacity',function () {
return (this === HoveredLine) ? 1.0 : 0.1;
})
.style('stroke-width',function () {
return (this === HoveredLine) ? 4 : 2;
})
;
})
This is achieved by giving the lines an id using classed. Using a different id, the lines in the other chart are selected similarly.
What I want to achieve is a way that if the line of e.g. group A is highlighted in one chart, it is also highlighted in the other chart also (and all other non-selected lines are faded in all charts). I thought maybe this could be done by getting the index of the selected line and somehow using that in the other chart.
We can solve it by having a single place where we handle mouseover and mouseout for both lines.
Primarily to avoid code repeat (DRY principle)
We will write mouse over and mouse out in a single place from where we can handle events in both svg.
So instead of attaching listeners individually like this
d3.selectAll('path.line.mainline')
.on("mouseover", function(d) {
and
d3.selectAll('path.line.mainlinel')
.on("mouseover", function(d) {
Do it like this:
d3.selectAll('path.line')//register this to all paths
.on("mouseover", function(d,i) {
Make use of filter to get the lines on which it is hovered.
d3.selectAll('path.line').filter(function(d1) {
return d.name == d1.name; all which have same name get it via filter
})
.style("opacity", 1)//show filtered links
.style("stroke-width", 4);
Full method will be like this:
function doHover() {
d3.selectAll('path.line')//register this to all paths
.on("mouseover", function(d,i) {
//first make all lines vanish
d3.selectAll('path.line')
.style("opacity", 0.1)
.style("stroke-width", 2)
//only show lines which have same name.
d3.selectAll('path.line').filter(function(d1) {
return d.name == d1.name
})
.style("opacity", 1)
.style("stroke-width", 4);
d3.select("div#chartw.container svg")
.append("text")
.attr("id", "cohorttext")
.html("Cohort " + d.name)
.attr("x", (width) / 1.2)
.attr("y", margin.top * 1.5)
.style("fill", color(d.name))
.style("font-weight", "bold")
.style("font-size", "18px");
d3.select("div#chartw.container svg")
.append("text")
.attr("id", "cohorttextx")
.html("Gini = " + giniw[i%giniw.length])//so that its always within the max length
.attr("x", (width) / 1.2)
.attr("y", 20 + margin.top * 1.5)
.style("fill", color(d.name))
.style("font-size", "14px");
d3.select("div#chartl.container svg")
.append("text")
.attr("id", "cohorttext")
.text("Cohort " + d.name)
.attr("x", (width) / 1.2)
.attr("y", margin.top * 1.5)
.style("fill", color(d.name))
.style("font-weight", "bold")
.style("font-size", "18px");
d3.select("div#chartl.container svg")
.append("text")
.attr("id", "cohorttextx")
.html("Gini = " + ginil[i%ginil.length])//so that its always within the max length
.attr("x", (width) / 1.2)
.attr("y", 20 + margin.top * 1.5)
.style("fill", color(d.name))
.style("font-size", "14px");
})
.on("mouseout", function() {
d3.selectAll('path.line')
.style("opacity", 1)
.style("stroke-width", 2);
//selectALL because we are giving same id to both text in 2 svgs
d3.selectAll("#cohorttext").remove()
d3.selectAll("#cohorttextx").remove()
})
}
Working code here
Please let me know if you have any queries on this.
I am currently trying to place a svg:image in the centre of my arc:
var arcs = svg.selectAll("path");
arcs.append("svg:image")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg ")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("width", "150px")
.attr("height", "200px");
I would appreciate it if someone could give me any advice on why it isn't appearing
thanks : http://jsfiddle.net/xwZjN/17/
Looking at the jsfiddle, you are creating the path elements after you try to append the svg:image elements to the them. It should be the other way around. You should first create the arcs and then append the images.
Second, as far as I know, the svg:path element should not contain any svg:image tags. It doesn't seem to display them if you place some inside. Instead what you should do is create svg:g tags with class arc and then use those to place the svg:images
Slightly modifying your jsfiddle could look something like this:
var colours = ['#909090','#A8A8A8','#B8B8B8','#D0D0D0','#E8E8E8'];
var arcs = svg.selectAll("path");
for (var z=0; z<30; z++){
arcs.data(donut(data1))
.enter()
//append the groups
.append("svg:g")
.attr("class", "arc")
.append("svg:path")
.attr("fill", function(d, i) { return colours[(Math.floor(z/6))]; })
.attr("d", arc[z])
.attr("stroke","black")
}
//here we append images into arc groups
var pics = svg.selectAll(".arc").append("svg:image")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg ")
.attr("transform", function(d,i) {
//since you have an array of arc generators I used i to find the arc
return "translate(" + arc[i].centroid(d) + ")"; })
.attr("x",-5)
.attr("y",-10)
.attr("width", "10px")
.attr("height", "20px");
Where I also decreased the size of the images and offset them so that they fit into the arc.