I am using NVD3.js and I am trying to show all points in a chart by default. Without doing onhover, I want to view all points in chart, Please advise how can I achieve this.
thanks,
Balaji
Add custom attribute and class to your nvd3 tag and write some custom css for particular chart .
<style>
.line-chart[data-points="true"] .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
stroke-width: 6px;
fill-opacity: 1;
stroke-opacity: 0.7;
}
</style>
`
View In Plnkr
In some of them you can do something like showValues
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.staggerLabels(true)
//.staggerLabels(historicalBarChart[0].values.length > 8)
.tooltips(false)
.showValues(true)
I saw you have put for "line chart" and I tried without success. Honestly, I have been trying with the default example, so I thought that maybe it makes no sense to show all the values because they are curves. What I mean is, it can be possible that for some reason when is rendering showvalues or similar is gonna try to show all the values in the curve and it won't work. Anyway, I am starting with nvd3 as well, but hope this help to figure it out how it can be done.
Related
I am trying to recreate Parallel Coordinates example.
Everytime an axis is brushed, I would like that particular axis to be highlighed by a change in color.
How do I do this?
Here is a screenshot of what I'm trying to implement:
I dont have a lot of experience with D3.js, so any help is appreciated.
Thanks in advance.
Here's one way to highlight the brushed dimensions in a parallel chart:
https://bl.ocks.org/shashank2104/92bed39893773d085794be54b73c233e/56b1c0df3fa1579c6a6f60ef9f660e99901af935
Code changes:
Added dimension name as ID to the <g> element:
.enter().append("g")
.attr("class", "dimension").attr('data-id', function (d) { return d;})
In the brushed function, based on the computed active dimensions, a selected class can be added. (this can also be done in the brushend cb)
// highlight brushed axes
dimensions.forEach(function(dimension) {
svg.select('g[data-id="'+dimension+'"]').classed('selected', actives.indexOf(dimension) > -1);
});
Based on the class applied in the previous step, use CSS to highlight the brush path (feel free to change this as per your requirements):
/* selected brushing dimension */
g.dimension.selected .axis path.domain {
stroke: red;
stroke-width: 2px;
}
Let me know if you have any questions. Hope this helps.
I have a question regarding c3.js.
Currently, we are using c3js to display a stacked area chart, that is pretty fine, but our client asked us if we can change the individual area's opacity when customer is mouse hovering one area.
I could not find any solution for this, and hope to hear your suggetions.
Thanks
Try adding this after you've set up your chart -->
d3.selectAll(".c3-area")
.style ("pointer-events", "all")
.on("mouseover", function (d) { return d3.select(this).style("opacity", 0.6)})
.on("mouseout", function (d) { return d3.select(this).style("opacity", 0.2)})
;
The pointer-events setting is the important bit as by default most of the elements in the c3 chart are styled to ignore them.
Add it to the end of the c3 example to see it working --> https://c3js.org/samples/chart_area.html
Problem Solved == use d3.drag() instead of d3.behaviour.drag() and use d3-drag.v1.min.js
I have set up a SVG chess board with D3js using for loop to go through each row and each column. I used unicode for chess pieces so each chess pieces is a svg element.
I am trying to drag chess pieces with drag behaviour of D3js but not possible.
All chess pieces have class "draggable". So I created the drag and attached it to all elements with class "draggable"
var drag = d3.behavior.drag()
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation(); // silence other listeners
})
.on("drag", function(d,i) {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
});
d3.selectAll(".draggable").call(drag);
My full code is here http://codepen.io/linhnt1516/pen/ZeGoNj?editors=0011
Also, I have tried to use the same drag function with and svg elements in other examples. Check out this code pen http://codepen.io/linhnt1516/pen/VpvobE?editors=0011 and drag the text and the box.
I have been looking through tons of drag examples of D3js but none of them works with the chess piece case.
Anyone has any solution or idea where things may go wrong here.
I haven't fully understand the differences between D3 v4 and D3 v3 drag behaviour or what is the actual problem with behaviour.drag()
Before I used D3 v3 and set up
var drag = d3.behaviour.drag()
This doesn't work as described in the question.
However I found a support d3 script which is d3-drag.v1.min.js
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
So when I added this one and set up
var drag = d3.drag()
The detailed code of drag is the same as above, just different initialization syntax. The drag functionality now works correctly. If anyone knows why .behaviour.drag() doesn't work and what is the actual differences between my old code and the new working one, please enlighten me.
I am going to set various css styles on an svg element, and was thinking I could do something like
d3.selectAll(".whatever")
.style(function(d) { return {"color":getColor(d), "background":getBackground(d)}});
Now, this doesn't work, but I'm wondering if I can do something similar to centralize setting overall style properties rather than set style properties individually.
Note: as Ray suggested, you can do something like this (I'm assuming you've already got data attached to the nodes):
d3.selectAll(".whatever")
.attr("style",function(d) {
return cssStyleStringYouWantToUse(d);
});
Only works on D3 v3:
To quote the documentation:
If you want to set several style properties at once, use an object literal like so:
selection.style({'stroke': 'black', 'stroke-width': 2})
This isn't possible with functions though, so in your case you still have to use the "long form".
You can specify a separate function for each style name in the style literal, like so:
d3.selectAll(".whatever").style({
color: function(d) { return getColor(d); },
background: function(d) { return getBackground(d); }
});
The easiest way of applying multiple css (static or dynamic) in d3 is to set style as many times as you need it. For example:
d3.selectAll('whatever')
.style('color', 'green')
.style('height', (d) => d + 'px');
Currently i am not using any other plug in for tool tip on mouse hover of grid row. I am using
$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});
Where the Name is the column name where the tool tip will be set and rowid identify the row. For more information read this answer including the references.
Is there any external plug in to achieve the same in better UI effect.
This tool tip does not seems to be good enough to fulfill my requirement
Because in the next version of jQuery UI will be included Tooltip (see demo) I recommend you better to download it now from github and a little play with it.
I prepared the demo which change the tooltip for the second column of the grid and use HTML contain with custom class (I use in demo standard ui-state-highlight class) and custom animation effect (slideUp/slideDown). So you will see about following
I hope the demo will help you to implement your requirements to custom tooltips.
It is also possible to use another approach.
As many "fancy" tooltips are based on class definitions and jquery, you could load the tooltip related class on loadcomplete, e.g.:
$(this).find("td").addClass('gridtip');
I have used a very small and effective tooltip from Alen Gracalic
which I call on hover event, like this:
jQuery("#competencegrid").live('hover',function(e){
gridtip();
});
Additionally, I make sure to remove all previous titles so that the browsers built-in tool-tip function does not show up. This is also done in after loadcomplete:
$('[title]').each(function(){
$this = $(this);
if($this.attr('title').length>1){
$.data(this, 'title', $this.attr('title'));
}
$this.removeAttr('title');
});
(In the original code from Alen Gracalic, the title attribute is removed while showing the tooltip and then restored. This method does not interact very well with jqgrid. Therefore it is better to remove it completely and rely on jquery data.)
The check on title length above is a specific need I have in my application and can be disregarded.
Finally, when loading the tooltip in the javaclass, I am referring to the jquery data rather than the title attribute (as that one now is empty).
this.gridtip = function(){
xOffset = 15;
yOffset = 20;
$(".gridtip").hover(function(e){
this.t = $.data(this, 'title');
if(this.t){
$("body").append("<p id='gridtip'>"+ this.t +"</p>");
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
},
function(){
$("#gridtip").remove();
});
$(".gridtip").mousemove(function(e){
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Lastely, but not necessary - this is how my .css class looks like:
#gridtip{
position:absolute;
border:4px solid #adadad;
background:#fefefe;
-moz-border-radius: 5px;
padding:4px 5px;
color:#666;
display:none;
font-size:14px;
font-family:verdana;
text-align:left;
z-index:50;
filter: alpha(opacity=100);
opacity:0.85;
}
In my application, I am not using the main fields text to display as tool-tip.
Instead I am replacing the title contents by text from a hidden column, before loading it into jquery data. The procedure to do it looks something like this:
var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
if(description.length>0){
$("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
}
}