I am implementing the Zoomable Treemap in D3 (http://bost.ocks.org/mike/treemap/), however I have modified it so the leaf rects will go to URLs when clicked. It also adds an ellipsis if the title is too long.
I'd like to implement word wrapping on leaf rects instead but cannot get it to work. I wanted to add a set of tspans to the text but am struggling with the execution order too much to understand where to put it.
Code: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm
Data: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json
I've researched that I either need tspans breaking it up or a div with the text inside but don't know how to do either. There are examples of text wrap for the regular D3 Treemap but I've found none for the Zoomable Treemap and the code is significantly different.
The easiest thing to do is probably to replace the SVG text elements with divs inside foreignObject. To do that, you would replace
g.append("text") //was text
.attr("dy", ".75em")
...
with
g.append("foreignObject")
.attr("dy", ".75em")
...
.append("xhtml:div")
...
It might also be advisable to set the width and height attributes of the foreignObject (using code similar to what you're using to determine whether the text is too long) so that the text flows correctly.
Related
I created a heatmap and sparklines next to the heatmap.
HERE the Plunker
Now I would like that when the user hovers over a cell of the heatmap, a red dot is displayed on the corresponding sparkline.
On the other hand, when the user hovers over the sparkline, the corresponding cell in the heatmap is highlighted.
I hope it's clearer with some drawings:
I thought I could change the code at this point:
var cells = svg.selectAll('rect')
.data(data)
.enter()
.append('g')
.append('rect')
//...
.on('mouseover', tip.show) // <- HERE
.on('mouseout', tip.hide);
I should keep track of the rectangle on which the mouse is located and somehow pass this data to the piece of code that controls the sparkline.
But I don't really know how to do it and I have not found similar examples.
Thanks!
HERE MY PLUNKER
add this liblary:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
To solve your problem, you need understand the concept,
The D3 can holding data when you put on it
The D3 can select base on class and id
The DOM element can hold attribute (Ex: attr-id)
Scale linear can be invers, that mean if you have domain you can have range and if you have range you can have domain
Element that draw with D3 is updatable & deletable
understand the liblary you use (d3-tip)
What i Change
i add class and id to element i want to select
if i want to use data, i save data to data-attribute
i make function to track my mouse on Line-chart, and invers it to get value
i draw object tip i want to use
read the code if you want to understand ask me which line you dont understand, if you need explanation
I have two nvd3 pie charts in my page and when I try to position them with
the following code,only the first one is getting replaced. The second one seems to have no effect.
This is the code I used
d3.select(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
This is taken in the first graph, but for the second pie chart,the positioning is not applied, when I checked with Firebug.
Please help me on this.
In order to select all pie charts on the page, you'll need to use d3.selectAll as follows
d3.selectAll(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
According to d3 API reference:
A selection is an array of elements pulled from the current document.
...
...
After selecting elements, you apply operators to them to do stuff. These operators can get or set attributes, styles, properties, HTML and text content. Attribute values and such are specified as either constants or functions; the latter are evaluated for each element.
You can find more at https://github.com/mbostock/d3/wiki/Selections
Take a look at this jsfiddle. Magnifying on hover works well for text and images, but I would like to have the same effect for the chart.
I would like the solution, if possible, to be applicable to any D3 SVG-based chart.
The example uses jquery plugin AnythingZoomer, it looked to me as a good starting point, however, you don't need to stick to it, you can use anything else if you wish.
I am aware of D3 fisheye pluging, this is related, but not quite what I want.
You can do this by not explicitly declaring width and height in the SVG (which is overwritten by CSS anyway), using the viewBox attribute, and then allowing AnythingZoom to clone the content of your original chart.
Demo (Fragile): http://jsfiddle.net/H9psX/ http://jsfiddle.net/H9psX/38/
Changes
var svg = d3.select("#small-chart").append("svg")
// .attr("width", diameter + 300)
// .attr("height", diameter)
.attr('viewBox', "0 0 " + 225 + " " + 225);
// ...
$("#zoom3").anythingZoomer({
clone: true
});
Separation of concerns
Since you are drawing in SVG using D3 (where you need to know the width and height for the pack layout) and using a jquery plugin which zooms by setting classes and absolute positioning, you have to share the coordinates (the 225px magic number) in CSS and in JS.
Ideally, you would want to keep the magic number at only one place. To do that you can declare the value only in CSS and then read them in your JS after creating your SVG element.
We have requirement to add drop down with axis label so that user can change the data from there.We require this drop down box effect on only specific label.
One approach we have tried is to add svg:image with label and the functionality is working fine but the other label is having the down arrow image that is not required. So can anybody help me out how I can select only one label? Actually there are multiple labels and its index is getting changed on chart update. Please find below code which is working for adding images to all labels.
e.g.
g.selectAll('.nv-x.nv-axis').selectAll('.tick.major').append("svg:image").
on("click", click)
.attr("xlink:href", "images/top-bar-logo.png")
.attr("width", 20)
.attr("height", 20).attr("x", -20);
You can use the filter() function to select the ticks that you need to append the image to. The documentation I've linked to has a few examples -- you might be able to do it without filter() by passing a different selector to selectAll().
I'm using a D3 tree. Similar to: http://bl.ocks.org/mbostock/4063570
However, this particular diagram is bigger than the browser window.
Given that i know exactly which one of the JSON element's that i want to reveal.
How could i scroll that element into view within the svg canvas?
The easiest way to achieve this is probably to wrap what you want to appear in a g element and use a transition on the translation.
groupToShow.attr("transform", "translate(1000,1000)")
.transition()
.duration(1000)
.attr("transform", "translate(0,0)");
Adapt the values for translation and duration as needed.