D3 Click event not working on google map - javascript

I am having trouble getting a google map to recognize clicks. Everything else is working and the circles are displaying correctly. But when I click on a circle the cursor does not change from a hand and if I click on it the console.log does not get invoked.
Any suggestions?
<meta charset="utf-8" />
<meta content="initial-scale=1.0, user-scalable=no" name="viewport" /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="/mydrupal/sites/default/d3_files/d3.v3.js"></script>
<style type="text/css">svg {
border:0px solid #ebebeb;
}
.members, .members svg {
position: absolute;
}
.members svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.members circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
#map {
width: 960px;
height: 700px;
margin: 0;
padding: 0;
}
</style>
<div id="map"> </div>
<script type="text/javascript">
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:400,
resizable: false,
modal : true,
overlay: {
backgroundColor: "#000", opacity: 0.5
},
close: function(ev, ui) {
$(this).remove();
}
});
}
var cx; var cy;
var width = 1000;
var height = 800;
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map") .node(), {
zoom: 11,
center: new google.maps.LatLng(43.7, -79.4),
mapTypeId: google.maps.MapTypeId.TERRAIN // was ROADMAP
}
); // end new map
var circles;
var imageAttributes = {height:32, width:32, x:-16, y:-16};
d3.json("http://localhost:8888/mydrupal/member-json?nocache=" + (new Date()).getTime(),function(error,members){
var bottom=members.organizations.map(function(members) {
return members.member;
});
var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes() .overlayMouseTarget)
.append("div")
.attr("class", "members")
; // end var layer
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function() {
var projection = this.getProjection(),
padding = 10; // end var projection
var marker = layer.selectAll("svg")
.data(bottom)
.each(transform) // update existing markers
.enter()
.append("svg:svg")
.each(transform)
.attr("class", "marker")
; // end var marker
// Add a label.
marker.append("svg:text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.on("click", function(bottom) {
console.log("click"); //not happening
var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
prettyAlert(message, bottom.title);
})
.on("touchstart", function(bottom) {
console.log("click"); //not happening
var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
prettyAlert(message, bottom.title);
})
.text(function(bottom) {
return bottom.title;
})
; // end text marker append
// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("click", function(bottom) {
console.log("click"); //not happening
var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
prettyAlert(message, bottom.title);
})
.on("touchstart", function(bottom) {
console.log("click"); //not happening
var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
prettyAlert(message, bottom.title);
})
; // end marker append circle
function transform(bottom) {
bottom = new google.maps.LatLng(bottom.field_lat, bottom.field_lng);
bottom = projection.fromLatLngToDivPixel(bottom);
return d3.select(this)
.style("left", (bottom.x - padding) + "px")
.style("top", (bottom.y - padding) + "px");
} // end transform
}; // end overlay draw
}; // end overlay add function
// Bind our overlay to the map…
overlay.setMap(map);
}); // end members json
</script>

Related

Is there a way alter the color lines on D3.js line chart?

fairly new to D3.js but keen to update the color scheme of my currently working version, the color: steelblue is used in the .css files but seems to be getting overridden from somewhere else, any idea how to best go about this? (as you can see i've tried updating to pink)
.chart-wrapper .line {
fill: none;
stroke: pink;
stroke-width: 5px;
}
// Render the chart
chartObj.render = function () {
//Create SVG element
chartObj.svg = chartObj.chartDiv
.append('svg')
.attr('class', 'chart-area')
.attr(
'width',
chartObj.width + (chartObj.margin.left + chartObj.margin.right)
)
.attr(
'height',
chartObj.height + (chartObj.margin.top + chartObj.margin.bottom)
)
.append('g')
.attr(
'transform',
'translate(' + chartObj.margin.left + ',' + chartObj.margin.top + ')'
);
// Draw Lines
for (var y in yObjs) {
yObjs[y].path = chartObj.svg
.append('path')
.datum(chartObj.data)
.attr('class', 'line')
.attr('d', yObjs[y].line)
.style('stroke', color(y))
.attr('data-series', y)
.on('mouseover', function () {
focus.style('display', null);
})
.on('mouseout', function () {
focus.transition().delay(700).style('display', 'none');
})
.on('mousemove', mousemove);
}
return chartObj;
}

It looks like you are basing your code on this example here which is quite an in-depth place to start if you are new to d3.
I have modified the code to utilize the colour specified in the configuration object which appears to have been proposed but not implemented by the author of the example.
Previously the colours were generated according to the built-in d3.scale.category10 colours but this has been removed.
This example code also uses d3 version 3 which probably means it is not a great starting point as the newer versions provide many API improvements. If you are interested in learning more about d3 colour schemes then please see this article here
function makeLineChart(dataset, xName, yObjs, axisLables) {
var chartObj = {};
var color = d3.scale.category10();
chartObj.xAxisLable = axisLables.xAxis;
chartObj.yAxisLable = axisLables.yAxis;
/*
yObjsects format:
{y1:{column:'',name:'name',color:'color'},y2}
*/
chartObj.data = dataset;
chartObj.margin = {top: 15, right: 60, bottom: 30, left: 50};
chartObj.width = 650 - chartObj.margin.left - chartObj.margin.right;
chartObj.height = 480 - chartObj.margin.top - chartObj.margin.bottom;
// So we can pass the x and y as strings when creating the function
chartObj.xFunct = function(d){return d[xName]};
// For each yObjs argument, create a yFunction
function getYFn(column) {
return function (d) {
return d[column];
};
}
// Object instead of array
chartObj.yFuncts = [];
for (var y in yObjs) {
yObjs[y].name = y;
yObjs[y].yFunct = getYFn(yObjs[y].column); //Need this list for the ymax function
chartObj.yFuncts.push(yObjs[y].yFunct);
yObjs[y].color = d3.rgb(yObjs[y].color);
}
//Formatter functions for the axes
chartObj.formatAsNumber = d3.format(".0f");
chartObj.formatAsDecimal = d3.format(".2f");
chartObj.formatAsCurrency = d3.format("$.2f");
chartObj.formatAsFloat = function (d) {
if (d % 1 !== 0) {
return d3.format(".2f")(d);
} else {
return d3.format(".0f")(d);
}
};
chartObj.xFormatter = chartObj.formatAsNumber;
chartObj.yFormatter = chartObj.formatAsFloat;
chartObj.bisectYear = d3.bisector(chartObj.xFunct).left; //< Can be overridden in definition
//Create scale functions
chartObj.xScale = d3.scale.linear().range([0, chartObj.width]).domain(d3.extent(chartObj.data, chartObj.xFunct)); //< Can be overridden in definition
// Get the max of every yFunct
chartObj.max = function (fn) {
return d3.max(chartObj.data, fn);
};
chartObj.yScale = d3.scale.linear().range([chartObj.height, 0]).domain([0, d3.max(chartObj.yFuncts.map(chartObj.max))]);
chartObj.formatAsYear = d3.format("");
//Create axis
chartObj.xAxis = d3.svg.axis().scale(chartObj.xScale).orient("bottom").tickFormat(chartObj.xFormatter); //< Can be overridden in definition
chartObj.yAxis = d3.svg.axis().scale(chartObj.yScale).orient("left").tickFormat(chartObj.yFormatter); //< Can be overridden in definition
// Build line building functions
function getYScaleFn(yObj) {
return function (d) {
return chartObj.yScale(yObjs[yObj].yFunct(d));
};
}
for (var yObj in yObjs) {
yObjs[yObj].line = d3.svg.line().interpolate("cardinal").x(function (d) {
return chartObj.xScale(chartObj.xFunct(d));
}).y(getYScaleFn(yObj));
}
chartObj.svg;
// Change chart size according to window size
chartObj.update_svg_size = function () {
chartObj.width = parseInt(chartObj.chartDiv.style("width"), 10) - (chartObj.margin.left + chartObj.margin.right);
chartObj.height = parseInt(chartObj.chartDiv.style("height"), 10) - (chartObj.margin.top + chartObj.margin.bottom);
/* Update the range of the scale with new width/height */
chartObj.xScale.range([0, chartObj.width]);
chartObj.yScale.range([chartObj.height, 0]);
if (!chartObj.svg) {return false;}
/* Else Update the axis with the new scale */
chartObj.svg.select('.x.axis').attr("transform", "translate(0," + chartObj.height + ")").call(chartObj.xAxis);
chartObj.svg.select('.x.axis .label').attr("x", chartObj.width / 2);
chartObj.svg.select('.y.axis').call(chartObj.yAxis);
chartObj.svg.select('.y.axis .label').attr("x", -chartObj.height / 2);
/* Force D3 to recalculate and update the line */
for (var y in yObjs) {
yObjs[y].path.attr("d", yObjs[y].line);
}
d3.selectAll(".focus.line").attr("y2", chartObj.height);
chartObj.chartDiv.select('svg').attr("width", chartObj.width + (chartObj.margin.left + chartObj.margin.right)).attr("height", chartObj.height + (chartObj.margin.top + chartObj.margin.bottom));
chartObj.svg.select(".overlay").attr("width", chartObj.width).attr("height", chartObj.height);
return chartObj;
};
chartObj.bind = function (selector) {
chartObj.mainDiv = d3.select(selector);
// Add all the divs to make it centered and responsive
chartObj.mainDiv.append("div").attr("class", "inner-wrapper").append("div").attr("class", "outer-box").append("div").attr("class", "inner-box");
chartSelector = selector + " .inner-box";
chartObj.chartDiv = d3.select(chartSelector);
d3.select(window).on('resize.' + chartSelector, chartObj.update_svg_size);
chartObj.update_svg_size();
return chartObj;
};
// Render the chart
chartObj.render = function () {
//Create SVG element
chartObj.svg = chartObj.chartDiv.append("svg").attr("class", "chart-area").attr("width", chartObj.width + (chartObj.margin.left + chartObj.margin.right)).attr("height", chartObj.height + (chartObj.margin.top + chartObj.margin.bottom)).append("g").attr("transform", "translate(" + chartObj.margin.left + "," + chartObj.margin.top + ")");
// Draw Lines
for (var y in yObjs) {
yObjs[y].path = chartObj.svg.append("path").datum(chartObj.data).attr("class", "line").attr("d", yObjs[y].line).style("stroke", yObjs[y].color).attr("data-series", y).on("mouseover", function () {
focus.style("display", null);
}).on("mouseout", function () {
focus.transition().delay(700).style("display", "none");
}).on("mousemove", mousemove);
}
// Draw Axis
chartObj.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + chartObj.height + ")").call(chartObj.xAxis).append("text").attr("class", "label").attr("x", chartObj.width / 2).attr("y", 30).style("text-anchor", "middle").text(chartObj.xAxisLable);
chartObj.svg.append("g").attr("class", "y axis").call(chartObj.yAxis).append("text").attr("class", "label").attr("transform", "rotate(-90)").attr("y", -42).attr("x", -chartObj.height / 2).attr("dy", ".71em").style("text-anchor", "middle").text(chartObj.yAxisLable);
//Draw tooltips
var focus = chartObj.svg.append("g").attr("class", "focus").style("display", "none");
for (var y in yObjs) {
yObjs[y].tooltip = focus.append("g");
yObjs[y].tooltip.append("circle").attr("r", 5);
yObjs[y].tooltip.append("rect").attr("x", 8).attr("y","-5").attr("width",22).attr("height",'0.75em');
yObjs[y].tooltip.append("text").attr("x", 9).attr("dy", ".35em");
}
// Year label
focus.append("text").attr("class", "focus year").attr("x", 9).attr("y", 7);
// Focus line
focus.append("line").attr("class", "focus line").attr("y1", 0).attr("y2", chartObj.height);
//Draw legend
var legend = chartObj.mainDiv.append('div').attr("class", "legend");
for (var y in yObjs) {
series = legend.append('div');
series.append('div').attr("class", "series-marker").style("background-color", yObjs[y].color);
series.append('p').text(y);
yObjs[y].legend = series;
}
// Overlay to capture hover
chartObj.svg.append("rect").attr("class", "overlay").attr("width", chartObj.width).attr("height", chartObj.height).on("mouseover", function () {
focus.style("display", null);
}).on("mouseout", function () {
focus.style("display", "none");
}).on("mousemove", mousemove);
return chartObj;
function mousemove() {
var x0 = chartObj.xScale.invert(d3.mouse(this)[0]), i = chartObj.bisectYear(dataset, x0, 1), d0 = chartObj.data[i - 1], d1 = chartObj.data[i];
try {
var d = x0 - chartObj.xFunct(d0) > chartObj.xFunct(d1) - x0 ? d1 : d0;
} catch (e) { return;}
minY = chartObj.height;
for (var y in yObjs) {
yObjs[y].tooltip.attr("transform", "translate(" + chartObj.xScale(chartObj.xFunct(d)) + "," + chartObj.yScale(yObjs[y].yFunct(d)) + ")");
yObjs[y].tooltip.select("text").text(chartObj.yFormatter(yObjs[y].yFunct(d)));
minY = Math.min(minY, chartObj.yScale(yObjs[y].yFunct(d)));
}
focus.select(".focus.line").attr("transform", "translate(" + chartObj.xScale(chartObj.xFunct(d)) + ")").attr("y1", minY);
focus.select(".focus.year").text("Year: " + chartObj.xFormatter(chartObj.xFunct(d)));
}
};
return chartObj;
}
.chart-wrapper {
max-width: 950px;
min-width: 304px;
margin: 0 auto;
background-color: #FAF7F7;
}
.chart-wrapper .inner-wrapper {
position: relative;
padding-bottom: 50%;
width: 100%;
}
.chart-wrapper .outer-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.chart-wrapper .inner-box {
width: 100%;
height: 100%;
}
.chart-wrapper text {
font-family: sans-serif;
font-size: 11px;
}
.chart-wrapper p {
font-size: 16px;
margin-top: 5px;
margin-bottom: 40px;
}
.chart-wrapper .axis path,
.chart-wrapper .axis line {
fill: none;
stroke: #1F1F2E;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.chart-wrapper .axis path {
stroke-width: 2px;
}
.chart-wrapper .line {
fill: none;
stroke: steelblue;
stroke-width: 5px;
}
.chart-wrapper .legend {
min-width: 200px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
font-size: 16px;
padding: 10px 40px;
}
.chart-wrapper .legend>div {
margin: 0px 25px 10px 0px;
flex-grow: 0;
}
.chart-wrapper .legend p {
display: inline;
font-size: 0.8em;
font-family: sans-serif;
font-weight: 600;
}
.chart-wrapper .legend .series-marker {
height: 1em;
width: 1em;
border-radius: 35%;
background-color: crimson;
display: inline-block;
margin-right: 4px;
margin-bottom: -0.16rem;
}
.chart-wrapper .overlay {
fill: none;
pointer-events: all;
}
.chart-wrapper .focus circle {
fill: crimson;
stroke: crimson;
stroke-width: 2px;
fill-opacity: 15%;
}
.chart-wrapper .focus rect {
fill: lightblue;
opacity: 0.4;
border-radius: 2px;
}
.chart-wrapper .focus.line {
stroke: steelblue;
stroke-dasharray: 2, 5;
stroke-width: 2;
opacity: 0.5;
}
#media (max-width:500px) {
.chart-wrapper .line {
stroke-width: 3px;
}
.chart-wrapper .legend {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="multiline.css">
<script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>
<script type="text/javascript">
d3.csv('https://gist.githubusercontent.com/asielen/44ffca2877d0132572cb/raw/9c18f31f9ffbb402b070d88efc9a6381d57c0735/multiline_data.csv', function(error, data) {
data.forEach(function(d) {
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
});
var chart = makeLineChart(
data,
'year', {
FinTechs: {
column: 'variableA',
color:'pink'
},
SMEs: {
column: 'variableB',
color: 'green'
},
}, {
xAxis: 'Year',
yAxis: 'Amount'
}
);
chart.bind('#chart-line1');
chart.render();
});
</script>
</body>
</html>

How to zoom faster in a SVG drawing with D3?

I am working on a project with D3.js that displays regions of interest (ROI) which are <g> elements with one <polygon> and one <text>. I noticed that zooming becomes very slow when there are a lot of ROI and it seems that this is mostly because of the texts, i.e. when they are hidden with display: none, zoom is much faster. The zoom speed is different in every browser: Firefox is quite fast, Chrome is average and Edge is slow.
I tried to speed up the text rendering by using the CSS property text-rendering: optimizeSpeed; but the difference is marginal. I noticed that some fonts are faster to render than others. Currently the best results I obtained is by using font-family: monospace;.
So my question is: How to zoom faster in an SVG drawing with D3? Is there a font that is known to be faster to render than others? Or is there a CSS, SVG or D3 trick that could help?
You can test the zoom speed with the snippet. If you click on the button, the text will be hidden an zooming will be much faster.
"use strict";
// Create data with this structure:
// DATA = [{ name: "", coords: [x0, y0, x1, y1, x2, y2, x3, y3]}]
var nbPolyX = 100;
var nbPolyY = 50;
var sqSize = 800 / nbPolyX;
var DATA = [];
for (let idY = 0; idY < nbPolyY; idY++) {
for (let idX = 0; idX < nbPolyX; idX++) {
DATA.push({
name: "x" + idX + "y" + idY,
coords: [
idX * sqSize + 1, idY * sqSize + 1,
(idX + 1) * sqSize - 1, idY * sqSize + 1,
(idX + 1) * sqSize - 1, (idY + 1) * sqSize - 1,
idX * sqSize + 1, (idY + 1) * sqSize - 1
]
})
}
}
var SVGELEM = {};
var ZOOMER = {};
var TRNSF = {
k: 1,
x: 0,
y: 0
};
var ZOOMER = {};
var GZOOM = {};
var ROI = {};
var POLY = {};
var TXT = {};
var BUTTON = {};
addButton();
addSVG();
function addSVG() {
ZOOMER = d3
.zoom()
.scaleExtent([0.9, 40])
.on("zoom", function () {
onZoom();
});
SVGELEM = d3.select("body").append("svg")
.attr("width", nbPolyX * sqSize)
.attr("height", nbPolyY * sqSize)
.call(ZOOMER);
GZOOM = SVGELEM.append("g");
ROI = GZOOM.selectAll("g")
.data(DATA)
.enter()
.append("g")
.classed("roi", true);
POLY = ROI.selectAll("polygon")
.data(function (d) {
return [d.coords];
})
.enter()
.append("polygon")
.attr("points", function (d) {
return d;
});
TXT = ROI.selectAll("text")
.data(function (d) {
var nbElem = d.coords.length;
// Polygon mean point X.
var xMean = 0;
for (let index = 0; index < nbElem - 1; index += 2) {
xMean += d.coords[index];
}
xMean /= nbElem / 2;
// Polygon mean point Y.
var yMean = 0;
for (let index = 1; index < nbElem; index += 2) {
yMean += d.coords[index];
}
yMean /= nbElem / 2;
// Return value.
var ret = {
name: d.name,
x: xMean,
y: yMean
};
return [ret];
})
.enter()
.append("text")
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.text(function (d) {
return d.name;
});
}
function addButton() {
BUTTON = d3.select("body").append("button")
.text("HIDE TEXT")
.on("click", function btnOnClick() {
btnOnClick.state = !btnOnClick.state;
d3.selectAll("text").classed("cl_display_none", btnOnClick.state);
if (btnOnClick.state) d3.select(this).text("SHOW TEXT");
else d3.select(this).text("HIDE TEXT");
});
}
function onZoom() {
if (d3.event !== null) TRNSF = d3.event.transform;
GZOOM.attr(
"transform",
"translate(" + TRNSF.x + "," + TRNSF.y + ") scale(" + TRNSF.k + ")"
);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SVG ZOOM SPEED</title>
<style>
body {
text-align: center;
font-family: monospace;
display: block;
margin: 0 auto;
}
svg {
margin: 10px auto;
border: 1px solid;
display: block;
}
.roi polygon {
shape-rendering: optimizeSpeed;
vector-effect: non-scaling-stroke;
fill: rgba(0, 255, 0, 0.25);
stroke: rgba(0, 255, 0, 1);
stroke-width: 1px;
}
.roi text {
text-rendering: optimizeSpeed;
font-family: monospace;
font-size: 1px;
text-anchor: middle;
dominant-baseline: middle;
}
.cl_display_none {
display: none;
}
button {
width: 150px;
height: 50px;
font-family: monospace;
font-size: 15pt;
margin: 0;
}
</style>
</head>
<body>
<h3>SVG ZOOM SPEED</h3>
<p>Use the mouse wheel to zoom in and out the SVG drawing then hide the text with the button and observe the speed difference. Test it in different browsers.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="zoom_speed.js"></script>
</body>
</html>

D3 JS - Making a Polygon Draggable using hard coded Bounding Box Attributes Does Not Work

I draw a Polygon using D3 mouse events as shown in this fiddle.
Below is the method that get's the polygon's bounding box and sets the polygon's bounding box properties.
function completePolygon() {
d3.select('g.outline').remove();
gPoly = svgCanvas.append('g')
.classed("polygon", true);
polyPoints.splice(polyPoints.length - 1);
polyEl = gPoly.append("polygon")
.attr("points", polyPoints);
for (var i = 0; i < polyPoints.length; i++) {
gPoly.append('circle')
.attr("cx", polyPoints[i][0])
.attr("cy", polyPoints[i][1])
.attr("r", 4)
.call(dragBehavior);
}
isDrawing = false;
isDragging = true;
bbox = polyEl._groups[0][0].getBBox();
var bbox2 = gPoly._groups[0][0].getBBox();
//Altering the bounding box's attribute of polygon
bbox.x = 0;
bbox.y = 0;
bbox.width = 50;
bbox.height = 50;
gPoly.attr("transform", "translate(" + 0 + "," + 0 + ")");
// polyEL.attr("transform", "translate(" + 0 + "," + 0 + ")");
//
// gPoly.call(d3.drag().on("drag", movePolygon(bbox)));
}
I want to make the entire polygon draggable. I tried getting the Bounding Box of the drawn Polygon and setting the X and Y coordinates to 0 then translating it on drag like I did for the circle and rectangle elements in this fiddle but changing any of the polygon's bounding box properties don't seem to have an affect on the polygon element. However translating for the polygon works.
Is there any other way other than looping through the polygon's 2 dimensional array of coordinates and updating all the coordinate points on to implement a draggable polygon?

I'm really not following all this getBBox() stuff. Why don't you drag the element using the traditional way?
gPoly.call(d3.drag().on("drag", function(d) {
d3.select(this).attr("transform", "translate(" +
(d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}));
Here is your code with that change:
d3.select('#poly').on('click', function() {
new Polygon();
});
var w = 600,
h = 500;
var svgCanvas = d3.select('body').append('svg').attr("width", w).attr("height", h);
function Polygon() {
var polyPoints = [];
var gContainer = svgCanvas.append('g').classed("outline", true);
var isDrawing = false;
var isDragging = false;
var linePoint1, linePoint2;
var startPoint;
var bbox;
var boundingRect;
var shape;
var gPoly;
var polyDraw = svgCanvas.on("mousedown", setPoints)
.on("mousemove", drawline)
.on("mouseup", decidePoly);
var dragBehavior = d3.drag().on("drag", alterPolygon);
// var dragPolygon = d3.drag().on("drag", movePolygon(bbox));
//On mousedown - setting points for the polygon
function setPoints() {
if (isDragging) return;
isDrawing = true;
var plod = d3.mouse(this);
linePoint1 = {
x: plod[0],
y: plod[1]
};
polyPoints.push(plod);
var circlePoint = gContainer.append("circle")
.attr("cx", linePoint1.x)
.attr("cy", linePoint1.y)
.attr("r", 4)
.attr("start-point", true)
.classed("handle", true)
.style("cursor", "pointer");
// on setting points if mousedown on a handle
if (d3.event.target.hasAttribute("handle")) {
completePolygon()
}
}
//on mousemove - appending SVG line elements to the points
function drawline() {
if (isDrawing) {
linePoint2 = d3.mouse(this);
gContainer.select('line').remove();
gContainer.append('line')
.attr("x1", linePoint1.x)
.attr("y1", linePoint1.y)
.attr("x2", linePoint2[0] - 2) //arbitary value must be substracted due to circle cursor hover not working
.attr("y2", linePoint2[1] - 2); // arbitary values must be tested
}
}
//On mouseup - Removing the placeholder SVG lines and adding polyline
function decidePoly() {
gContainer.select('line').remove();
gContainer.select('polyline').remove();
var polyline = gContainer.append('polyline').attr('points', polyPoints);
gContainer.selectAll('circle').remove();
for (var i = 0; i < polyPoints.length; i++) {
var circlePoint = gContainer.append('circle')
.attr('cx', polyPoints[i][0])
.attr('cy', polyPoints[i][1])
.attr('r', 4)
.attr("handle", true)
.classed("handle", true);
}
}
//Called on mousedown if mousedown point if a polygon handle
function completePolygon() {
d3.select('g.outline').remove();
gPoly = svgCanvas.append('g')
.classed("polygon", true);
polyPoints.splice(polyPoints.length - 1);
//console.log(polyPoints);
polyEl = gPoly.append("polygon")
.attr("points", polyPoints);
for (var i = 0; i < polyPoints.length; i++) {
gPoly.append('circle')
.attr("cx", polyPoints[i][0])
.attr("cy", polyPoints[i][1])
.attr("r", 4)
.call(dragBehavior);
}
isDrawing = false;
isDragging = true;
bbox = polyEl._groups[0][0].getBBox();
var bbox2 = gPoly._groups[0][0].getBBox();
bbox.x = 0;
bbox.y = 0;
bbox.width = 50;
bbox.height = 50;
// debugger;
gPoly.datum({
x: 0,
y: 0
})
//console.log(bbox);
gPoly.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"
});
// polyEL.attr("transform", "translate(" + 0 + "," + 0 + ")");
//
gPoly.call(d3.drag().on("drag", function(d) {
d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}));
}
//Altering polygon coordinates based on handle drag
function alterPolygon() {
if (isDrawing === true) return;
var alteredPoints = [];
var selectedP = d3.select(this);
var parentNode = d3.select(this.parentNode);
//select only the elements belonging to the parent <g> of the selected circle
var circles = d3.select(this.parentNode).selectAll('circle');
var polygon = d3.select(this.parentNode).select('polygon');
var pointCX = d3.event.x;
var pointCY = d3.event.y;
//rendering selected circle on drag
selectedP.attr("cx", pointCX).attr("cy", pointCY);
//loop through the group of circle handles attatched to the polygon and push to new array
for (var i = 0; i < polyPoints.length; i++) {
var circleCoord = d3.select(circles._groups[0][i]);
var pointCoord = [circleCoord.attr("cx"), circleCoord.attr("cy")];
alteredPoints[i] = pointCoord;
}
//re-rendering polygon attributes to fit the handles
polygon.attr("points", alteredPoints);
bbox = parentNode._groups[0][0].getBBox();
console.log(bbox);
}
function movePolygon() {
}
function prepareTransform(bboxVal) {
var originalPosition = {
x: bboxVal.x,
y: bboxVal.y
};
console.log(bboxVal);
console.log(bbox);
bbox.x = 0;
bbox.y = 0;
// //render a bounding box
// shape.rectEl.attr("x", bbox.x).attr("y", bbox.y).attr("height", bbox.height).attr("width", bbox.width);
//
// //drag points
// shape.pointEl1.attr("cx", bbox.x).attr("cy", bbox.y).attr("r", 4);
// shape.pointEl2.attr("cx", (bbox.x + bbox.width)).attr("cy", (bbox.y + bbox.height)).attr("r", 4);
// shape.pointEl3.attr("cx", bbox.x + bbox.width).attr("cy", bbox.y).attr("r", 4);
// shape.pointEl4.attr("cx", bbox.x).attr("cy", bbox.y + bbox.height).attr("r", 4);
return originalPosition;
}
}
h1 {
text-align: center;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 60%;
/* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
vertical-align: middle;
/* top | middle | bottom ... do what you want */
}
.my-svg {
/* svg into : object, img or inline */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
/* only required for <img /> */
z-index: 0;
}
svg {
border: solid 1px rgba(221, 61, 16, 0.71);
}
.rectangle {
fill: lightblue;
stroke: blue;
stroke-width: 2px;
fill-opacity: 0.5;
}
.rectangle-bind {
fill: none;
stroke: #081c4e;
stroke-width: 1px;
stroke-dasharray: 5;
}
circle {
fill: lightgreen;
stroke: green;
stroke-width: 2px;
fill-opacity: 0.5;
}
.rect-active {
fill: #1578db;
}
.pointC-active {
fill: #FF8F00;
}
.circle-active {
fill: #4CAF50;
}
path {
fill: #ffb7b3;
stroke: #ff4736;
stroke-width: 5px;
}
polygon {
fill: #b6eeff;
fill-opacity: 0.5;
stroke: #0067ff;
stroke-width: 2px;
}
line {
fill: none;
stroke: #cd08ff;
stroke-width: 2px;
}
polyline {
fill: none;
stroke: #563aff;
stroke-width: 2px;
}
circle.handle {
fill: yellow;
stroke: #cb9c0f;
stroke-width: 2px;
cursor: pointer;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<button id='poly'>Poly</button>
PS: Don't use _groups[0][0]. Use node() instead.

Bar chart to take account of negative values

I have the following data in a csv file called BarData.csv:
Fruit,dt,amount
Apple,12/28/2016,-1256
Apple,12/29/2016,-500
Apple,12/30/2016,3694
Apple,12/31/2016,5586
Apple,1/1/2017,4558
Apple,1/2/2017,6696
Apple,1/3/2017,7757
Apple,1/4/2017,8528
Apple,1/5/2017,5543
Apple,1/6/2017,3363
Apple,1/7/2017,5464
Pear,12/25/2017,250
Pear,12/26/2017,669
Pear,12/27/2017,441
Pear,12/28/2017,159
Pear,12/29/2017,357
Pear,12/30/2017,775
Pear,12/31/2017,669
The following html, css, and javascript is in one .html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>BAR SINGLE FUNCTION</title>
<script src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
#radioDiv {
top: 45px;
font-family: verdana;
font-size: 8px;
width: 455px;
}
#TOPbarChart {
position: absolute;
top: 50px;
left: 30px;
width: 750px;
height: 195px;
}
.axis--y path,
.axis--x path {
display: none;
}
.axis--x line,
.axis--y line {
stroke: black;
fill: none;
stroke-width: 2px
}
.yAxis text,
.xAxis text {
font: 7pt Verdana;
stroke: none;
fill: black;
}
.title,
.titleX {
font-family: Verdana;
font-size: 10px;
}
</style>
</head>
<body>
<div id="radioDiv">
<label>
<input id="radioFrt" type="radio" name="frt" value="Apple" class="radioB" checked> APPLE
</label>
<label>
<input type="radio" name="frt" value="Pear" class="radioB"> PEAR
</label>
</div>
<div id="TOPbarChart"></div>
<script type="text/javascript">
var currentFruit = "Apple";
var currentColr = "#00a5b6";
var barDataCSV_Dly = "BarData.csv";
//
//
// radio button
document.getElementById("radioFrt").checked = true;
d3.selectAll('input[name="frt"]').on("change", function change() {
currentFruit = this.value;
TOPbarChart(currentFruit, currentColr);
});
//FORMATS
var parseDate = d3.time.format("%m/%d/%Y").parse;
//
// BASIC SIZING
//
function barChartBasics() {
var margin = {
top: 25,
right: 35,
bottom: 25,
left: 70
},
width = 550 - margin.left - margin.right,
height = 155 - margin.top - margin.bottom,
colorBar = d3.scale.category20(),
barPaddingFine = 1,
barPaddingThick = 2;
return {
margin: margin,
width: width,
height: height,
colorBar: colorBar,
barPaddingFine: barPaddingFine,
barPaddingThick: barPaddingThick
};
}
// create svg element
var basics = barChartBasics();
var svg = d3.select("#TOPbarChart")
.append("svg")
.attr({
"width": basics.width + basics.margin.left + basics.margin.right,
"height": basics.height + basics.margin.top + basics.margin.bottom,
id: "svgTOPbarChart"
});
// create svg group
var plot = svg
.append("g")
.attr({
"transform": "translate(" + basics.margin.left + "," + basics.margin.top + ")",
id: "svgPlotTOPbarChart"
});
var axisPadding = 2;
var leftAxisGroup = svg
.append('g')
.attr({
transform: 'translate(' + (basics.margin.left - axisPadding) + ',' + (basics.margin.top) + ')',
'class': "yAxis axis--y",
id: "yAxisGTOPbarChart"
});
var bottomAxisGroup = svg
.append('g')
.attr({
'class': "xAxis axis--x",
id: "xAxisGTOPbarChart"
});
var titleTxt = svg.append("text")
.attr({
x: basics.margin.left + 12,
y: 20,
'class': "title",
'text-anchor': "start"
})
// create scales with ranges
var xScale = d3.time.scale().range([0, basics.width]);
var yScale = d3.scale.linear().range([basics.height, 0]);
function TOPbarChart(
frt, colorChosen) {
// get the data
d3.csv(barDataCSV_Dly, function(rows) {
TOPbarData = rows.map(function(d) {
return {
"Fruit": d.Fruit,
"dt": parseDate(d.dt),
"amount": +d.amount
};
}).filter(function(row) {
if (row['Fruit'] == frt) {
return true;
}
});
// create domains for the scales
xScale.domain(d3.extent(TOPbarData, function(d) {
return d.dt;
}));
var amounts = TOPbarData.map(function(d) {
return d.amount;
});
var yMax = d3.max(amounts);
var yMin = d3.min(amounts);
var yMinFinal = 0;
if (yMin < 0) {
yMinFinal = yMin;
}
yScale.domain([yMinFinal, yMax]);
// introduce the bars
// var plot = d3.select("#svgPlotTOPbarChart")
var sel = plot.selectAll("rect")
.data(TOPbarData);
sel.enter()
.append("rect")
.attr({
x: function(d, i) {
return xScale(d.dt);
},
y: function(d) {
return yScale(d.amount);
},
width: (basics.width / TOPbarData.length - basics.barPaddingFine),
height: function(d) {
return basics.height - yScale(d.amount);
},
fill: colorChosen,
'class': "bar"
});
// this little function will create a small ripple affect during transition
var dlyRipple = function(d, i) {
return i * 100;
};
sel
.transition()
.duration(dlyRipple) //1000
.attr({
x: function(d, i) {
return xScale(d.dt);
},
y: function(d) {
return yScale(d.amount);
},
width: (basics.width / TOPbarData.length - basics.barPaddingFine),
height: function(d) {
return basics.height - yScale(d.amount);
},
fill: colorChosen
});
sel.exit().remove();
// add/transition y axis - with ticks and tick markers
var axisY = d3.svg.axis()
.orient('left')
.scale(yScale)
.tickFormat(d3.format("s")) // use abbreviations, e.g. 5M for 5 Million
.outerTickSize(0);
leftAxisGroup.transition().duration(1000).call(axisY);
// add/transition x axis - with ticks and tick markers
var axisX = d3.svg.axis()
.orient('bottom')
.scale(xScale);
bottomAxisGroup
.attr({
transform: 'translate(' + (basics.margin.left + ((basics.width / TOPbarData.length) / 2)) + ',' + (basics.margin.top + basics.height) + ')',
})
.transition().duration(1000).call(axisX.ticks(5));
titleTxt.text("Daily: last " + TOPbarData.length + " days");
// console.log(TOPbarData.length)
});
}
//
//
//
//
TOPbarChart(currentFruit, currentColr);
//
//
//
//
</script>
</body>
</html>
When all the data is positive everything is pretty much ok - but when some of the data is negative we can see the result in this plunker demo:
http://plnkr.co/edit/1hudJYkRq2MnuIlwxXZi?p=preview
How do I amend the code so that:
- the negative bars are shown?
- the base of the positive bars moves vertically up when negative numbers are included?
- the vertical movement is also included in the transition?
Above is more than 1 question but help on any would be appreciated.

The key is to play with the y and height attributes of the bars to position them correctly.
For y, change it to:
y: function(d) {
return yScale(Math.max(0, d.amount));
},
And for the height, change it to:
height: function(d) {
return Math.abs(yScale(d.amount) - yScale(0));
},
You can then style the negative bars to make them a different color.
Check the updated Plunkr - http://plnkr.co/edit/q7dQsPW0PiPuwFTy8gLN?p=preview
Edit:
For the coloring part, you can achieve it with a 1 liner if you want to reduce lines and want more simplicity.
Instead of:
fill: function(d) {
var col = colorChosen
if (d.amount < 0) {
col = "#FF0000";
}
return col;
},
});
You can do:
fill: function(d) {
return d.amount < 0 ? "#FF0000" : colorChosen;
},

How to remove lines in between cartogram Maps in d3.js

I am new to d3.js. Trying to understand the cartogram example give in http://prag.ma/code/d3-cartogram/ . Here they gave example for USA map. I am trying the same for World Map to see how things works. My cartogram map has lines in between. My data has values for only few countries so I am setting the rest of the country's value as low or 0.
<!DOCTYPE html>
<html>
<head>
<title>Cartograms with d3 & TopoJSON</title>
<meta charset="utf-8">
<meta property="og:image" content="placeholder.png">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="lib/colorbrewer.js"></script>
<script src="lib/topojson.js"></script>
<script src="cartogram.js"></script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.4em;
padding: 0;
margin: 0;
}
#container {
width: 960px;
margin: 20px auto;
}
h1 {
font-size: 200%;
margin: 0 0 15px 0;
}
h2 {
font-size: 160%;
margin: 0 0 10px 0;
}
p {
margin: 0 0 10px;
}
form, form > * {
margin: 0;
}
#status {
color: #999;
}
#map-container {
height: 700px;
text-align: center;
position: relative;
margin: 20px 0;
}
#map {
display: block;
position: absolute;
background: #fff;
width: 100%;
height: 100%;
margin: 0;
}
path.state {
stroke: #666;
stroke-width: .5;
}
path.state:hover {
stroke: #000;
}
form {
font-size: 120%;
}
select {
font-size: inherit;
}
#placeholder {
position: absolute;
z-index: -1;
display: block;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Cartograms with d3 & TopoJSON</h1>
<form>
<p>
<label>Scale by <select id="field"></select></label>
<span id="status"></span>
</p>
</form>
<div id="map-container">
<svg id="map"></svg>
</div>
</div>
<script>
var margin = 1,
width = 970 - margin,
height = 700 - margin;
if (!document.createElementNS) {
document.getElementsByTagName("form")[0].style.display = "none";
}
var percent = (function() {
var fmt = d3.format(".2f");
return function(n) { return fmt(n) + "%"; };
})(),
fields = [
{name: "(no scale)", id: "none"},
{name: "Internet_Users", id: "internet", key: "Internet_Users", format : percent},
{name: "GDP", id: "gdp", key: "GDP"},
{name: "Literacy_rates", id: "literacy", key: "Literacy_rates", format : percent},
{name: "female_male", id: "fm", key: "female_male"},
{name: "Population", id: "pop", key: "Population"},
],
fieldsById = d3.nest()
.key(function(d) { return d.id; })
.rollup(function(d) { return d[0]; })
.map(fields),
field = fields[0],
colors = colorbrewer.RdYlBu[3]
.reverse()
.map(function(rgb) { return d3.hsl(rgb); });
var body = d3.select("body"),
stat = d3.select("#status");
var fieldSelect = d3.select("#field")
.on("change", function(e) {
field = fields[this.selectedIndex];
location.hash = "#" + [field.id]
});
fieldSelect.selectAll("option")
.data(fields)
.enter()
.append("option")
.attr("value", function(d) { return d.id; })
.text(function(d) { return d.name; });
var map = d3.select("#map").attr("width", width + margin)
.attr("height", height + margin),
zoom = d3.behavior.zoom()
.translate([-38, 32])
.scale(.95)
.scaleExtent([0.5, 10.0])
.on("zoom", updateZoom),
layer = map.append("g")
.attr("id", "layer"),
states = layer.append("g")
.attr("id", "states")
.selectAll("path");
updateZoom();
function updateZoom() {
var scale = zoom.scale();
layer.attr("transform",
"translate(" + zoom.translate() + ") " +
"scale(" + [scale, scale] + ")");
}
var proj = d3.geo.mercator().scale(145).translate([width / 2, height / 1.5]),
topology,
geometries,
rawData,
dataById = {},
carto = d3.cartogram()
.projection(proj)
.properties(function(d) {
return dataById[d.id];
})
.value(function(d) {
return +d.properties[field];
});
window.onhashchange = function() {
parseHash();
};
d3.json("data/world_countries_topo.json", function(topo) {
topology = topo;
// console.log("T",topology)
geometries = topology.objects.countries.geometries;
d3.csv("data/parallel_score.csv", function(data) {
rawData = data;
dataById = d3.nest()
.key(function(d) { return d.Id; })
.rollup(function(d) { return d[0]; })
.map(data);
init();
});
});
function init() {
var features = carto.features(topology, geometries),
path = d3.geo.path()
.projection(proj);
states = states.data(features)
.enter()
.append("path")
.attr("class", "state")
.attr("id", function(d) {
return d.Id;
})
.attr("fill", "#000")
.attr("d", path);
states.append("title");
parseHash();
}
function reset() {
stat.text("");
body.classed("updating", false);
var features = carto.features(topology, geometries),
path = d3.geo.path()
.projection(proj);
states.data(features)
.transition()
.duration(750)
.ease("linear")
.attr("fill", "#fafafa")
.attr("d", path);
states.select("title")
.text(function(d) {
return d.Id;
});
}
function update() {
var start = Date.now();
body.classed("updating", true);
var key = field.key
var fmt = (typeof field.format === "function")
? field.format
: d3.format(field.format || ","),
value = function(d) {
if(d.properties == undefined){}
else {
return +d.properties[key];
}
},
values = states.data()
.map(value)
.filter(function(n) {
return !isNaN(n);
})
.sort(d3.ascending),
lo = values[0],
hi = values[values.length - 1];
console.log("L",lo)
console.log("H",hi)
var color = d3.scale.linear()
.range(colors)
.domain(lo < 0
? [lo, 0, hi]
: [lo, d3.mean(values), hi]);
// normalize the scale to positive numbers
var scale = d3.scale.linear()
.domain([lo, hi])
.range([1, 1000]);
// tell the cartogram to use the scaled values
carto.value(function(d) {
if( value(d) == undefined) {
return lo
}
else {
console.log("SCale", (value(d)))
return scale(value(d));
}
});
// generate the new features, pre-projected
var features = carto(topology, geometries).features;
// update the data
states.data(features)
.select("title")
/*.text(function(d) {
return [d.properties.Id, fmt(value(d))].join(": ");
});*/
states.transition()
.duration(750)
.ease("linear")
.attr("fill", function(d) {
if(d.properties == undefined){
return color(lo)
}
else {
return color(value(d));
}
})
.attr("d", carto.path);
var delta = (Date.now() - start) / 1000;
stat.text(["calculated in", delta.toFixed(1), "seconds"].join(" "));
body.classed("updating", false);
}
var deferredUpdate = (function() {
var timeout;
return function() {
var args = arguments;
clearTimeout(timeout);
stat.text("calculating...");
return timeout = setTimeout(function() {
update.apply(null, arguments);
}, 10);
};
})();
var hashish = d3.selectAll("a.hashish")
.datum(function() {
return this.href;
});
function parseHash() {
var parts = location.hash.substr(1).split("/"),
desiredFieldId = parts[0],
field = fieldsById[desiredFieldId] || fields[0];
fieldSelect.property("selectedIndex", fields.indexOf(field));
if (field.id === "none") {
reset();
} else {
deferredUpdate();
location.replace("#" + [field.id].join("/"));
hashish.attr("href", function(href) {
return href + location.hash;
});
}
}
</script>
</body>
</html>
Here is the link of my map: My Map
Can Someone please explain me why I am getting this line.
Thanks.

We had the same problem a year or so back and it is due to the arcs in the topojson file moving from 180 or 360 back to 0, basically wrapping at the ends of the map.
We needed to manually go into the map file and edit it using QGIS.
This resolved the issue of the lines.
You will also find if you are using the Cartogram code that the map of the world is far to detailed than you will need given you will be distorting the map anyway. If you are generating the cartogram in real time then you will face delays in the code.
You should probably reduce the complexity of the map too.
Here is an example of the JSON we used to create real time hexagonal cartograms in the browser.
Simplified World Map JSON

Categories