I'm trying to add tooltip to a collapse graph. And i was able to add the tooltip using the mouseon and mouseout event.But the challenge is i am unable to apply my own css on that tool tip .my code is
function mouseover(d) {
d3.select(this).append("text")
.attr("class", "hover")
.attr('transform', function(d){
return 'translate(5, -10)';
})
.text(d.name + ": " + d.id);
}
Just add the necessary css:
.hover{
fill: red;
}
Example here.
Related
I am using this Bar Chart on D3 Observable. I need to change the font-size and color of the labels on the axes/ticks. In the previous D3 approach you could simply do this in CSS like:
text {
fill : white;
font-size : 22px;
}
But Observable doesn't provide the usual HTML file for placing CSS.
If you look at the file there doesn't appear to be any text appended, although in inspect element you can see the labels are indeed "text"
I tried adding style to the appended g:
svg.append("g")
.style("fill", "white")
.call(xAxis);
But to no avail.
In an Observable notebook you can add your CSS using the html method with a template literal, like this:
html`<style>
text {
fill : white;
font-size : 22px;
}
</style>`
Just create a new cell (clicking the + sign) and copy/paste the snippet above.
You can style the text on this chart in Observable by looking for the cells containing the XAxis and yAxis.
and...
Below the .attr("transform") lines add this line for font size:
.style("font-size", "22px")
...and this line for color:
.attr("color", "red")
Not sure why D3 decided to change .style("fill" to .attr("color"
Your cells should now look like this:
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.style("font-size", "22px")
.attr("color", "red")
.call(d3.axisBottom(x)
.tickSizeOuter(0))
and...
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.style("font-size", "22px")
.attr("color", "red")
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
Result:
I am trying to add the label and icon in this codepen as per this example Labeled Force Layout
In my restart method, I have added the code
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8).attr("y", -8).attr("width", 16).attr("height", 16)
.on("mousedown", mousedownNode);
node.append("text").attr("dx", 12).attr("dy", ".35em").text(function(d) { return d.id });
after my existing code :
node.enter().insert("circle", ".cursor")
.attr("class", "node").attr("r", 10).on("mousedown", mousedownNode);
I understand that I am making the node as circle first then trying to add an icon to it, which is the issue here but I am not sure how to fix it.
You cannot append a <text> element to a <circle> element.
The idiomatic solution here is converting node into a group selection, just like Mike Bostock has in the example you shared:
node.enter().insert("g", ".cursor")
.attr("class", "node");
Then, appending the circles and the texts to node:
node.append("circle")
.attr("r", 10)
.on("mousedown", mousedownNode);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) {
return d.id
});
And, finally, changing the tick function:
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"
});
Here is the updated CodePen: https://codepen.io/anon/pen/VBepoo?editors=0010
Of course, this is just a quick refactor: you have to change other parts of your code for having node as a group selection.
Thank you Gerardo for this very helpful CodePen entry. Apparently, the CSS overrides the JS and must be modified in order for the icon to appear, for example:
From: .node { fill: #000; }
To: .node { fill: none; stroke: <some color so the labels appear>;}
My update of your update on CodePen
I'm working on a barchart from dc.js. I'm having trouble providing a tooltip or a title on the labels X axis.
The reason why I need axis tooltips is that I added a feature to text labels that reaches a maximum length and it will apply the '...' into it. The tooltip will help the users to view the full text of that X axis Text labels. Here are the following that i have done but it didnt work.
I use chart.selectAll(g.x text) **or .text and add an .on('mouseover', ...) function which that didn't work. I look at the developer tool and i see the events when i select the element for the labels but its not appearing when i hover over it.
I manually added an attribute of 'onMouseOver' and its function and that also didn't work. Here is the code I used. The getTooltip function have a console.log message to see if it triggers.
chart.selectAll('g.x text')
.attr('transform', 'translate(-40,20) rotate(315)')
.attr('onMouseOver', 'getTooltip(this)');
I added a title attribute when I selectAll(g.x text) but that didn't work.
I'm running out of ideas and this needs to be done soon. Please can you assist me?
Is it possible to have a tooltip or a title on the X axis labels for barchart dc.js?
Thank you. Here is the code I did below.
barchart
.title(function(v) {
var total = d3.format(',d') ( v.value.Total );
return lve_cit_bucketsLookup[v.key] + " Total:" + total;
}).renderlet(function (chart) {
// rotate x-axis labels
chart.selectAll('g.x text')
.attr('transform', 'translate(-40,20) rotate(315)')
/* .attr('onMouseOver', 'getTooltip(this)') */;
// works with .tick
chart.selectAll('g.x text')
.on('mouseover', function(d){
console.log("mouseover fool: " + d)
div.transition()
.duration(200)
.style("opacity", .9);
div.html("dest")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on('mouseout', function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
})
.xAxis().tickFormat(function(v) {
var getLookup = lve_cit_bucketsLookup[v];
if(getLookup.length > 10)
return getLookup.substring(0,10) + '...';
else
return getLookup;
});
By the way, I used the .on('mouseover', ...) function when I selectAll(x axis text labels) for the heatmap dc.js and it works like a charm. But I'm still having trouble for this barchart.
dc.js blocks pointer events on its axes in its CSS.
I think this was a heavy-handed way to stop the text from accidentally being selected, which nowadays would better be addressed with user-select: none. (I've filed an issue to investigate this.)
It's explicitly re-enabled for heatmaps because of the select row or column feature, which is why that worked for you.
Anyway, you can add your own CSS rule to override dc.js like this:
.dc-chart g.axis text {
pointer-events: auto;
}
and you should start getting those mouse events again!
I am trying to create VIEWS for my TAXONOMIES like this - Collapsible Tree (http://bl.ocks.org/mbostock/4339083).
I installed D3 modules, imported all the D3 libraries and then I started to create a custom library. I created d3.[mynewlibrary].libraries.info file, [mynewlibrary].css and [mynewlibrary].js and uploaded under d3.[mynewlibrary] folder. However, I went back to VIEWS and couldn't be able to select [mynewlibrary].
I wonder what would be the best way to validate my codes written in my custom library and if the VIEWS will automatically add the new custom library for selection.
I am new to D3. Can anyone provide some help?
Here below are my js and css codes. Thanks!
/**
*#file
*Javascript for D3 Collapsible Tree Library.
*/
(function($) {
Drupal.d3.collapsibletree = function (select, setting) {
var vis = d3.select("#viz").append("svg:svg")
.attr("width", 400)
.attr("height", 300)
.append("svg:g")
.attr("transform", "translate(40, 0)"); // shift everything to the right
// Create a tree "canvas"
var tree = d3.layout.tree()
.size([300,150]);
var diagonal = d3.svg.diagonal()
// change x and y (for the left to right tree)
.projection(function(d) { return [d.y, d.x]; });
// Preparing the data for the tree layout, convert data into an array of nodes
var nodes = tree.nodes(treeData);
// Create an array with all the links
var links = tree.links(nodes);
console.log(treeData)
console.log(nodes)
console.log(links)
var link = vis.selectAll("pathlink")
.data(links)
.enter().append("svg:path")
.attr("class", "link")
.attr("d", diagonal)
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
// Add the dot at every node
node.append("svg:circle")
.attr("r", 3.5);
// place the name atribute left or right depending if children
node.append("svg:text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; })
}
}
})(jQuery);
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
Hmm...
Without seeing your other files (.info), I can't be sure. But even if some of the JS is broken, this visualization should show up as an option in Views.
Are all your dependencies and versions correctly called in the .info file?
name = Collapsible Tree
description = D3 example Collapsible Tree library
files[js][] = collapsibletree.js
files[css][] = collapsibletree.css
version = 0.1
dependencies[] = d3.extend
dependencies[] = d3.tooltip
views[version] = 3.0
views[fields][rows][__data_type] = 2dnnv
views[fields][x_label][type] = string
views[settings] = views-settings.php
Is it possible to create a d3.js axis and have there be no tick marks and no numbering scheme? Basically, can I make the axis invisible? I'm using the code below to create my axes:
svg.selectAll("axis")
.data(d3.range(angle.domain()[1]))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
.call(d3.svg.axis()
.scale(radius.copy().range([0,0]))
.ticks(1)
.orient("left"))
.append("text")
.style("color", "white")
.attr("y",
function (d) {
if (window.innerWidth < 455){
console.log("innerWidth less than 455: ",window.innerWidth);
return -(0);
}
else{
console.log("innerWidth greater than 455: ",window.innerWidth);
return -(0);
}
})
.attr("dy", "0em");
If you don't want your axis to be visible, just don't draw them (basically comment out this code).
If you really just want to turn them white, you can use the following classes:
.axis line, .axis text, .axis path {
color: white;
}
This would be the easiest way to manipulate them to turn them 'on' and 'off'. Also, if you ever need to figure out how to style a d3 diagram, you can navigate through the SVG just like you do html and style with CSS the same way too.
For example, here is the SVG for the tick marks in the axis.
<line class="tick" y2="6" x2="0"></line>
You can see that I targeted the element (line) but you could also target (.tick) as well.