Skip to content

Commit

Permalink
fix : improvement tooltip fir simple layers
Browse files Browse the repository at this point in the history
  • Loading branch information
@neocarto
neocarto committed Mar 17, 2022
1 parent ca9302a commit 5c17292
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 44 deletions.
12 changes: 6 additions & 6 deletions src/helpers/tooltip2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ const d3 = Object.assign({}, d3selection);


export function tooltiptype(pointer, width, height){
const x_margin = 0.2 * width
const y_margin = 0.15 * height
const x_margin = 0.25 * width
const y_margin = 0.20 * height

if (pointer[0] < x_margin && pointer[1] <y_margin) { return "bottomleft";}
if (pointer[0] > width - x_margin && pointer[1] <y_margin) { return "bottomright";}
if (pointer[0] < x_margin && pointer[1] <y_margin) { return "bottomright";}
if (pointer[0] > width - x_margin && pointer[1] <y_margin) { return "bottomleft";}
if (pointer[0] < x_margin && pointer[1] > height - y_margin) { return "topright";}
if (pointer[0] > width - x_margin && pointer[1] > height - y_margin) { return "topleft";}
if (pointer[1] > height - y_margin) { return "top";}
Expand Down Expand Up @@ -120,11 +120,11 @@ export function addtooltip(g, params) {
text.attr("transform", `translate(${10},${-15 - y - h})`);
path.attr("d", `M0,0v${-h - 5 - 20}h${w + 20}v${h + 20}h${-w - 15}z`);
break;
case "bottomright":
case "bottomleft":
text.attr("transform", `translate(${-w - 10},${15 - y})`);
path.attr("d", `M0,0v${+h + 5 + 20}h${-w - 20}v${-h - 20}h${+w + 15}z`);
break;
case "bottomleft":
case "bottomright":
text.attr("transform", `translate(${10},${15 - y})`);
path.attr("d", `M0,0v${+h + 5 + 20}h${w + 20}v${-h - 20}h${-w - 15}z`);
break;
Expand Down
1 change: 1 addition & 0 deletions src/layers/simple.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function simple(selection, projection, options = {}, clipid) {
let symbol_iteration = options.symbol_iteration ?? 200
let symbol_shift = options.symbol_shift ?? 0;


// If lines
if (figuration(geojson) == "l") {
stroke = options.stroke
Expand Down
126 changes: 88 additions & 38 deletions src/layers/simple2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export function simple2(selection, projection, options = {}, clipid, width, heig
let fillOpacity = options.fillOpacity ?? 1;
let strokeOpacity = options.strokeOpacity ?? 1;
let tooltip = options.tooltip ? options.tooltip : "";
if (Array.isArray(tooltip)) { tooltip = { fields: tooltip }; }
if (typeof tooltip == "string") { tooltip = { fields: [tooltip] };}
let symbol = options.symbol ?? "circle";
let symbol_size = options.symbol_size ?? 40;
let symbol_iteration = options.symbol_iteration ?? 200
Expand Down Expand Up @@ -155,9 +157,6 @@ export function simple2(selection, projection, options = {}, clipid, width, heig

selection
.append("g")
// .attr(":inkscape:groupmode", "layer")
// .attr("id", "simple layer")
// .attr(":inkscape:label", "simple layer")
.selectAll("path")
.data(geojson.features)
.join("path")
Expand Down Expand Up @@ -186,44 +185,95 @@ export function simple2(selection, projection, options = {}, clipid, width, heig
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-dasharray", strokeDasharray)
//.attr("clip-path", `url(#clip_${clipid}`)
.on("touchmove mousemove", function (event, d) {
if (tooltip != "") {
if (Array.isArray(tooltip)) {
selection
.select("#info")
.call(
addtooltip,
`${d.properties[tooltip[0]]}\n${d.properties[tooltip[1]]}\n${
tooltip[2]
}`
.on("touchmove mousemove", function (event, d) {

if (tooltip != "") {
selection.select("#info").call(
addtooltip,

{
fields: (function () {
const fields = Array.isArray(tooltip.fields)
? tooltip.fields
: [tooltip.fields];
let result = [];
fields.forEach((e) => {
result.push(
e[0] == "$" ? `${d.properties[e.substr(1, e.length)]}` : e
);
} else {
selection
.select("#info")
.call(addtooltip, `${d.properties[tooltip]}`);
}
});
return result;
})(),
fontWeight: tooltip.fontWeight,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
fill: tooltip.fill,
stroke: tooltip.stroke,
type: tooltiptype(symbol_shift ? [d.x, d.y] : projection(d.geometry.coordinates), width, height)
}
if (tooltip != "") {
selection
.select("#info")
.attr("transform", `translate(
${symbol_shift ? d.x : projection(d.geometry.coordinates)[0]},
${symbol_shift ? d.y : projection(d.geometry.coordinates)[1]})`);
d3.select(this)
//.attr("stroke-width", strokeWidth + 0.5)
.attr("stroke-opacity", strokeOpacity - 0.3)
.attr("fill-opacity", fillOpacity - 0.3)
.raise();
}
})
.on("touchend mouseleave", function () {
selection.select("#info").call(addtooltip, null);
);
}
if (tooltip != "") {
selection
.select("#info")
.attr("transform", `translate(
${symbol_shift ? d.x : projection(d.geometry.coordinates)[0]},
${symbol_shift ? d.y : projection(d.geometry.coordinates)[1]})`);
d3.select(this)
.attr("stroke-opacity", strokeOpacity)
.attr("fill-opacity", fillOpacity)
.lower();
});
.attr("stroke-opacity", strokeOpacity - 0.3)
.attr("fill-opacity", fillOpacity - 0.3)
//.raise();
}
})
.on("touchend mouseleave", function () {
selection.select("#info").call(addtooltip, null);
d3.select(this)
.attr("stroke-opacity", strokeOpacity)
.attr("fill-opacity", fillOpacity)
//.lower();
});


// .on("touchmove mousemove", function (event, d) {
// if (tooltip != "") {
// if (Array.isArray(tooltip)) {
// selection
// .select("#info")
// .call(
// addtooltip,
// `${d.properties[tooltip[0]]}\n${d.properties[tooltip[1]]}\n${
// tooltip[2]
// }`
// );
// } else {
// selection
// .select("#info")
// .call(addtooltip, `${d.properties[tooltip]}`);
// }
// }
// if (tooltip != "") {
// selection
// .select("#info")
// .attr("transform", `translate(
// ${symbol_shift ? d.x : projection(d.geometry.coordinates)[0]},
// ${symbol_shift ? d.y : projection(d.geometry.coordinates)[1]})`);
// d3.select(this)
// //.attr("stroke-width", strokeWidth + 0.5)
// .attr("stroke-opacity", strokeOpacity - 0.3)
// .attr("fill-opacity", fillOpacity - 0.3)
// .raise();
// }
// })
// .on("touchend mouseleave", function () {
// selection.select("#info").call(addtooltip, null);
// d3.select(this)
// .attr("stroke-opacity", strokeOpacity)
// .attr("fill-opacity", fillOpacity)
// .lower();
// });



}

// Legend
Expand Down

0 comments on commit 5c17292

Please sign in to comment.