I have a NVD3 line graph based on a json file. It seems that the interactive guideline is sorted by the order in which each series appears in the JSON file. Is there any way to make this tooltip sorted by y value (at any given x-value) in decending order? One way to do this would be to manually sort the order in which the series data appears in the JSON file but I'm hoping there is perhaps some attributes in the interactiveguideline that would allow me to do this in NVD3 directly?
My html file looks like this:
<html>
<head>
<meta charset="utf-8">
<link href="nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="nvd3/build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="chart" class='with-3d-shadow with-transitions'>
<svg></svg>
</div>
<script>
d3.json("distance.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart()
.x(function(d,i) { return d[0] })
.y(function(d,i) {return d[1] });
chart.xAxis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.x2Axis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
chart.useInteractiveGuideline(true)
;
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
</body>
</html>
Related
I think I've hit a wall here. Not sure why my map isn't displaying at all.
I've converted the topojson file to geojson with the topojson client (https://github.com/topojson/topojson-client/blob/master/README.md)
Here's my JS file (I'm seeing my #map and background color, but nothing is rendering inside.)
var width = 900,
height = 600;
var svg = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geoAlbersUsa()
var path = d3.geoPath()
.projection(projection);
d3.json("https://gist.githubusercontent.com/Lupi7000/d770ce6f2985c3a7bac1099688e4f772/raw/d327f59834fb0f9f2201ad71c3f1711ecb5bf6de/NYTest.json")
.then(function(d) {
console.log(d)
var counties = topojson.feature(d, d.objects.cb_2015_new_york_county_20m)
console.log(counties)
svg.selectAll('path').data(counties.features)
.enter().append('path')
.attr('d', path);
});
Here's my HTML
<html>
<head>
<meta charset="UTF-8">
<title> NYS Map</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson#3.0.2/dist/topojson.min.js"></script>
<script src="https://unpkg.com/topojson-client#3"></script>
<script src="NYmap.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3> NYS MAP CLICKABLE AND SHIT... EVENTUALLY</h3>
<div id="map"><!-- MAP CONTAINER --></div>
</body>
</html>
And my stylesheet
body {
margin: 25px;
}
#map {
width: 900px;
height: 600px;
border: 1px solid black;
background: whitesmoke;
}
path {
fill: black;
}
Any help would be appreciated, thanks!
I've console logged my data so it's coming through, but I'm not sure what I need to do to make it show up.
Why the result of bBox.width, bBox.height are both 0? I expect them to be both 500px, how to rectify it?
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
rect {
stroke: #9A8B7A;
stroke-width: 1px;
fill: #CF7D1C;
}
svg{
width: 500px;
height: 500px;
background:blue;
}
</style>
<body>
</body>
<script>
var svg = d3.select("body").append("svg");
var bBox = svg.node().getBBox();
console.log(bBox.width + 'x' + bBox.height);
</script>
Try getBoundingClientRect instead of getBBox.
I've copied the code below from the example provided here https://scrimba.com/casts/cast-1953
However, no graph is shown. I also get no errors in the console.
When I enter d3 in the console an object is returned, so d3 is found.
What am I missing?
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function (d) { return d + "px"; })
.text(function (d) { return d; });
</script>
</head>
<body>
<div class="chart"></div>
</body>
Instead using script in head, try to use at the bottom of the page or use when page is ready.
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function (d) { return d + "px"; })
.text(function (d) { return d; });
</script>
You must place the body before the script like so:
<body>
<div class="chart"></div>
</body>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d) {
return d + "px";
})
.text(function(d) {
return d;
});
</script>
I have created a historical bar chart using nvd3 js. I want to get the value of corresponding x-axis label when a bar is clicked. How to get value of corresponding x-axis label on click event of rectangular bars in nvd3.js historical chart?
My current code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<svg id="test1"></svg>
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart
.margin({left: 100, bottom: 100})
.useInteractiveGuideline(true)
.duration(250)
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#test1')
.datum(sinData())
.transition()
.call(chart);
var rectArray=d3.select('g.nv-bars').selectAll('rect').on('click',function(d,i){alert(d+i)});
nv.utils.windowResize(chart.update);
return chart;
});
//Simple test data generators
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i*2, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{values: sin, key: "Sine Wave", color: "#ff7f0e"},
{values: cos, key: "Cosine Wave", color: "#2ca02c"}
];
}
function sinData() {
var sin = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10) * Math.random() * 100});
}
return [{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
}];
}
</script>
</body>
</html>
New to html/css/js and nvd3 so this may be a noob question.
I have an html doc that loads fine with a nvd3 chart that is drawn with a function drawChart(). However when I try to use jquery and I put drawChart() into $(document).ready, the chart does not load?
Why is this happening?
Here is the HTML code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Multi Bar Chart</title>
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1 {
height: 500px;
margin: 10px;
min-width: 100px;
min-height: 100px;
}
</style>
</head>
<body>
<div>
<h1 style="text-align: center;">Title</h1>
</div>
<div id="chart1" class='with-3d-shadow with-transitions'>
<form class="form-inline" style="text-align: center;">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
</div>
</form>
<svg></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBar.js"></script>
<script src="../src/models/multiBarChart.js"></script>
<script src="stream_layers.js"></script>
<script src="multiBarChart3.js"></script>
<script src="../src/jquery-2.1.1.js"></script>
</body>
</html>
Here is the javascript:
function drawChart(){
var test_data = stream_layers(3,128,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.margin({bottom: 100})
.transitionDuration(300)
.delay(0)
.rotateLabels(0)
.groupSpacing(0.1)
;
chart.multibar
.hideable(true);
chart.xAxis
.axisLabel("X")
.tickFormat(d3.format('d'));
chart.yAxis
.axisLabel("Y")
.tickFormat(d3.format(',.1f'));
chart.stacked(true);
d3.select('#chart1 svg')
.datum(test_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
};
//$(function(){
drawChart();
//});