Why doesn't the break tag render?
I've read several answers on SO, and tried a variety of different approaches, with no luck.
This fiddle shows the current fully functioning d3.js sample, with the problem of break tag not rendering:
http://jsfiddle.net/Xsnqx/1/
The relevant bit of code is here:
node.insert("text")
.attr("class", "text")
.style("text-anchor", "middle")
.html(function(d) {
var html = d.name.split(" ");
return html.join("<br>");
});
Note: if any of you d3 experts have additional comments / observations about the code I've constructed, please let me know. When I'm done, I want this code to be first-class.
You can't put HTML directly into SVG. You need to use the foreignObject element to embed HTML. Here's another question that addresses this: Auto line-wrapping in SVG text.
Just for completeness sake, I wanted to post the eventual d3 / js code that I ended up using to generate the XML (per #ScottCameron answer):
node.append("foreignObject")
.attr("class", "label")
.attr("width", "120")
.attr("height", "120")
.attr("transform", "translate(-60,-60)")
.html(function(d) {
var html = d.name.split(" ");
return html.join("<br>");
});
Related
I am building a force-directed graph, and as far as I can tell, I have written the code correctly. The DOM looks exactly right after this code runs. And yet, nothing is displayed.
var type_node_list = typeNodes(data);
shuffle(type_node_list);
initializePosition(type_node_list);
var links = typeLinks(type_node_list);
var svg = d3.select('#root');
var link = svg
.append('g')
.attr('id', 'links')
.selectAll('line')
.data(links)
.enter()
.append('line')
.attr('class', 'link');
var type_nodes = svg
.append('g')
.attr('id', 'nodes')
.selectAll('.node')
.data(type_node_list)
.enter()
.append(createTypeNode);
function updateTypeNodeLocations() {
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;});
type_nodes
.attr('x', nodeX)
.attr('y', nodeY);
}
updateTypeNodeLocations();
/*
var position_the_types = d3.forceSimulation()
.nodes( type_node_list )
.force("charge",d3.forceManyBody().strength(-10))
;
position_the_types.on('tick',updateTypeNodeLocations());
*/
The simulation portion is commented out because I'm trying to get the first part working. When I uncomment it, it only calls the 'tick' event once, even though the processing is clearly not complete. And there is nothing in the JavaScript console to explain it.
See http://jsfiddle.net/jarrowwx/gof5knaj/36/ for the full code.
I had things working this morning, and something changed and now nothing I do seems to work. I checked the D3 github, and the last commit appears to have been 11 days ago, so it's not likely caused by a change to the library.
Has anybody experienced something like this before? Any pointers on what I'm doing wrong? Have I uncovered a D3 bug?
The problem lie in my function createTypeNode.
I created the image element via: document.createElement('image'). That doesn't work. To create an image via JavaScript, one must use Namespaces.
See: Programmatically creating an SVG image element with javascript
I have fought half a day with seemingly simple problem with no avail so I'd love to get some good advice from stackoverflow geniuses.
I have a demo at http://62.165.130.126/d3-question
I tried to put it into jsfiddle but couldn't get the libraries right, hope this still allows you to dive in.
The problem is demonstrating itself in a d3.js javascript code when rotating text disappears. Or actually part of the rotating text.
Each pair of bars on the page should have two lines of the text rotated 45 degrees (downhill) not to write over the neighbors. If I don't rotate text everything is visible (but overlapping), but if I do, only the first pair of lines is OK. After that the first text disappears (or on some version was misplaced by some tens of pixels seemingly haphazard) but the second text sits right where it should using exactly the same code structure. I have exchanged the values and the problem isn't connected with the values but the order.
Here is the main code in javascript I have written.
$.each(data, function(a_key,a_val){
$.each(a_val, function(form_key,form_val){
$.each(form_val, function(person_key,person_val){
svg.append("rect")
.attr("x", start*2*width+width)
.attr("y", 420-person_val.val1/person_val.val1_max*400)
.attr("width", width-5)
.attr("height", person_val.val1/person_val.val1_max*400)
.style("fill", "red");
svg.append("rect")
.attr("x", start*2*width)
.attr("y", 420-person_val.val2/person_val.val2_max*400)
.attr("width", width-5)
.attr("height", person_val.val2/person_val.val2_max*400)
.style("fill", "green");
svg.append("text")
.attr("text-anchor", "start")
.attr("transform","translate(" + start*2*width+20 + ",430) rotate(45)")
.style("font-size","0.85em")
.text(person_val.pname);
svg.append("text")
.attr("text-anchor", "start")
.attr("transform","translate(" + start*2*width + ",430) rotate(45)")
.style("font-size","0.85em")
.text(person_val.ptype);
start++;
});
});
The application is just a mockup of the real solution but should show the essential problem without distractions. Each pair of bars should have the describing text below them. Currently they aren't centered yet but if things sort out that change should be straightforward.
Anybody any idea how to correct the code?
The problem is with "translate(" + start*2*width+20 + ",430) rotate(45)" code.
One of the results is translate(8020,430) rotate(45). Javascript turned 20 into string. Try to put braces around start*2*width+20 expression.
Here is my problem. My graph currently looks like this: Which is dandy. However, I want the black squares on top to be filled with pictures. Luckily I have a CSS file that has pictures linked with classes. I also have a JSON file that contains all the class names. All those class names are assigned to the squares and I can see the picture in the inspect element on Chrome. The only issue is the pictures don't appear in the square. (Also my axises broke, but that is secondary concern). CSS, JSON
This is where I'm assigning classes and creating the rectangles.
svg.selectAll(".div")
.data(data.chartData, function(d){return d.vNm;})
.enter().append("rect")
.attr("x", function(d){
return x(d.vNm);
})
.attr("y", function(d){
return (y(d.values.reduce(function(sum, d){
return sum + d.amount;
}, 0))) - 64.5;
})
.attr("width", 43)
.attr("height", 43)
.attr("class", function(d){return d.vId;})
.style("fill", function(d) { return segColor(d.data.type); });
One approach to solve your problem is to use html elements like div for the images above the chart instead of svg elements, so you can use the full power of css.
Luckily you don't need to calculate the position of those html elements by yourself, there are some libraries that help you position the images correctly above the bars in the chart.
Check out https://popper.js.org/ for example, you can just call its API for each bar you render using d3.js:
var popper = new Popper(barElement, onPopper, {
placement: 'top'
});
SVG elements do not follow exactly the same CSS rules as typical HTML elements.
In your case, background-image doesn't work.
The least painful way to achieve the effect would be to embed an <image> tag after the <rect>:
<image width="100" height="100" xlink:href="data:image/png;base64,...">
It means that you have to modify your JSON to store the image's base64 data in there instead of CSS.
I am creating a streamgraph, having used the example code from http://bl.ocks.org/mbostock/4060954 as a template.
I draw the streamgraph:
var svg = d3.select("#graph_area").append("svg")
.attr("width", width)
.attr("height", height)
....
svg.selectAll("path")
.data(layers)
.enter().append("path")
.attr("d", function (d) {return area(d.layer);})
Now it seems that I am not allowed to choose a different name from "path" for the DOM element here. If I do, then streamgraph no longer plots. Why is that?
Then I want to add a legend with bullets, but they don't plot. The elements show up in my web inspector (firebug), but their graphical representation is just not there. I figured it might be a similar problem with the DOM element name, but I don't actually know. Here is the code for my bullets:
//draw all the legend bullets and effects
svg.selectAll("bullets")
.data(layers)
.enter().append("bullets")
.attr("cx", 200)
.attr("cy", function(d, i) { return 20 + i*10; })
.style("fill", function(d) { return d.color; })
.attr("r", 5)
I briefly looked at API's for paths here and here, but I didn't find my answers there.
The element names you can use are defined in the SVG specification. This is a specific set (e.g. path, circle) -- using anything else will work in terms of appending the element to the DOM, but the browser won't know how to interpret and render it.
It's the same way in HTML -- there's a specific set of defined element names that browsers know how to render.
when i do this :
var link = svg.selectAll('.link')
.data(links)
.enter().append('path')
.attr('class', 'link')
.attr('d', diagonal)
There is no node with the .link class. So selectAll returns en empty selection. But i've found that, when you call this for the first time, you can selectAll('whaterverYouWant')
That is because D3 doesn't matter about what you select, as you provide the tag name and the classes later .append('path'), .attr(class ...).
And, if you want to select elements that already exist, i read in the doc that .enter returns a placeholder selection. But if it returns a selection of placeholders (anonymous tags with .link class ?), there is no point to append a path to a path.
When i call .append, it does what i want, i.e. append a path to svg. But i don't understand the logic behind that. (I'm glad it works though, because d3 is powerful)
So, ok i selectAll('anything') and append what i want, regardless of what i selected. But if i try this:
d3.select('#savestring-debug')
.selectAll('div')
.data(debugobjs)
.enter().append('span')
.attr('style', function(d) { return 'background:#'+d.color })
.text(function(d) { return d.aff });
This would create placeholders for divs, but i append spans. Actually spans are created but i'm still looking for my divs ;)
So, what is the principle behind selectAll >> data >> enter >> append ?
thanks
The principle behind selectAll > data > enter > append is explained pretty well by
Mike Bostock here: http://bost.ocks.org/mike/join/ where he explains the concept of the data-join. I can't speak with any authority on the right way to use selectAll, but the way I use it is to select all of the elements I am going to be modifying-appending-removing within the part of the SVG that I need to modify.
So if I'm working with "rects" in a certain area, I'll do something like this:
var svg = d3.select('#graphID')
.append("svg")
.attr("width", 300)
.attr("height", 500);
var graphGroup = self.svg.append("g");
//...Inside a render function
//just want all the "rect" elements in graphGroup
var rects = graphGroup.selectAll("rect")
.data(dataset);
//depending on dataset new rects will need to be appendend
rects.enter()
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 0)
.attr("height", 0)
//all rects are transitioned to new co-ordinates
rects.transition().duration(500)
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d){
return yScale(d);
})
//rects that have no data associated with them are removed
rects.exit()
.transition()
.duration(500)
.attr("x", -xScale.rangeBand())
.remove();
With the idea that I could have other rects in the SVG that do not belong to graphGroup. I just selectAll the rects in a certain area and work on them when needed.
This is a great question and a slightly odd property of D3. If you look carefully how anything is done in D3 you'll notice that everything is added by appending to what is previously created. So the logic behind having the svg.selectAll('whatever class of stuff you're going to add') is that you are kinda making a placeholder for where whatever you are about append to go. It's like the svg is a wall and you're hanging hooks on the upper ridge for you to THEN hang your paintings from. If you don't have the selectAll, I just tried this, you will still append whatever you were gonna make to the page, but it won't be appended to the svg.
The data-->enter-->append is basically saying for each element in the larger data file that you are passing into the data function, make a new element, and append this element to my selection with such and such properties (set when you use the .attr).