As you can see here in the screenshoot, at the bottom center(x axis), the label Quiz/Exam is cropped.
I increased the height for the Line Chart, but it does only increase the graph size.
I came across the same problem and fixed it by adding a margin to the chart, eg;
<LineChart
<LineChart
margin={{
top: 0,
right: 0,
left: 0,
bottom: 15
}}
...
>
Related
Intially I have the decreasing line plot but when I do cross filtering it won't be decreasing any more as the x-axis labels become fixed. I want this X-axis labels to be dynamic and to be arranged on the basis of the y-axis values. I ain't able to find the syntax or what to be used for this case.
I initialize my chart like
lineChart2
.height(600)
.width(lineChart2.width()*0.95) //give it a width
// .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
.dimension(lineTypeDimension)
.group(lineTypeGroup)
.ordering(function(kv) {
console.log("val:",kv.value);
return -kv.value; })
.x(d3.scaleOrdinal( ))
.xUnits(dc.units.ordinal)
.interpolate('linear')
.elasticY(true)
.renderArea(true)
.renderlet(function(chart){chart.selectAll("circle.dot").style("fill-opacity", 1).on('mousemove', null).on('mouseout', null);})
// .renderTitle(true)
.renderLabel(true)
.xAxis().ticks(3).tickFormat(function(d) {
return d;
});
Here is the working demo:
https://blockbuilder.org/ninjakx/302eaacb0a333e67c46c55dd60d27811
You can get the line chart to recalculate the X domain on each redraw by setting
lineChart2
.elasticX(true)
The feature was originally intended for linear scales in order to calculate the min and max each redraw. Ordinal scales work differently, with a sequence of domain and range values, but setting elasticX will will get the chart to recalculate the scale.
Have a graph that is very long. And I have the x-axis on the top of the graph. Was wondering if it is possible to have a floating x-axis so when the user scrolls down the graph the x-axis stays on the screen for the user to see?
Thank you for your help
In most case in d3js,
developers create a single svg element. But you can separate them; eg. x/y axis and data drawing area. And then You can assign this svg field statically via css to be constant.
var axisSvg = d3js.select('axisSvg').append('svg').attr('class','axisSvg);
var mainSvg = d3js.select('mainSvg').append('svg').attr('class','maingSvg);
and in css
.axisSvg{
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
I need help trying to achieve the first in the second image. Not the monocolor because the image and the text in the middle.
You can use a renderer which allows to add custom image / text anywhere.
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
.add();
image (String source, Number x, Number y, Number width, Number height)Since 2.0 Add an image from an external resource.
Parameters
source: String The URL of the image. x: String The x position of the
image's upper left corner. y: String The y position of the image's
upper left corner. width: String The width of the image. height:
String The height of the image.
I'm in process of creation of the nvd3 line chart with "step-after" interpolation. I need to have these horizontal pieces to be the same size visually even in case if X axis values are very different (e.g. [0, 90, 100])
Here is something that I expect: http://i.stack.imgur.com/MjvDl.png
Thanks.
You should use the interpolate attribute of your chart.
chart = nv.models.lineChart()
.margin({top: 50, right: 60, bottom: 30, left: 70})
.interpolate("step-after")
I'm trying to get the left position of an svg element that has a viewBox set. The viewBox is basically a square, while the actual svg element is more rectangular. In most cases, this isn't a problem (and in Chrome, everything works fine), however, when trying to get the left position of the element within Firefox, as the viewBox is square, Firefox reports the left position of the viewBox rather than the svg element.
See http://jsfiddle.net/c6SW6/11/ for an example which should make things obvious.
Basically, in Chrome, the number reported for the left position is 8 This is the number that I want. In Firefox, it's reported as 108. How do I get Firefox to report the number 8 as well?
Code
HTML
<div>
<svg viewBox="0 0 100 100"><rect x=0 y=0 width=100 height=100></rect></svg>
</div>
<p>
</p>
CSS
div {
height: 100px;
width: 300px;
margin: 0;
padding: 0;
position: absolute;
top: 200px;
}
svg {
background-color: green;
height: 100%;
width: 100%;
}
JS
$('p').text($('svg').offset().left);
Assuming we gave the rect an id="r" attribute...
If you just want the offset of the rect in the svg itself then it's
$('p').text(document.getElementById("r").getCTM().e);
If you want the offset from the page origin instead...
Call rect.getBoundingClientRect() and the left and top will contain the answer
$('p').text(document.getElementById("r").getBoundingClientRect().left);
or alternatively rect.getScreenCTM() the e and f members of the result will be the answer
$('p').text(document.getElementById("r").getScreenCTM().e);
If you rotate the svg using a transform then you'll get different answers, getBoundingClientRect() will give you an unrotated bounding rect but getScreenCTM will give you a transformed offset, since you're not doing that you can use either currently.
The 8 is the difference, i.e. the position of the element element on the page. That's not consistent with the description but if you want 8 then it's:
$('p').text(document.getElementById("r").getScreenCTM().e -
document.getElementById("r").getCTM().e);