bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 21:38:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Style narrative based the one selected

Browse Source
This commit is contained in:
Franc Camps-Febrer
2018-12-16 09:00:22 +01:00
committed by Lachlan Kermode
parent 7b25efda95
commit 288aff5c15
6 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/js/map/map.js
View File

@@ -165,7 +165,7 @@ Stop and start the development process in terminal after you have added your tok
.y(d => getCoords(d).y + transformY);
g.selectAll('.narrative')
.attr('d', sequenceLine);
.attr('d', d => sequenceLine(d.steps));
}
lMap.on("zoomend viewreset moveend", updateSVG);
@@ -365,8 +365,8 @@ Stop and start the development process in terminal after you have added your tok
}
function renderNarratives() {
const narrativesDom = g.selectAll('.narrative')
.data(domain.narratives.map(d => d.steps))
const narrativesDom = svg.selectAll('.narrative')
.data(domain.narratives)
narrativesDom
.exit()
@@ -375,40 +375,45 @@ Stop and start the development process in terminal after you have added your tok
narrativesDom
.enter().append('path')
.attr('class', 'narrative')
.attr('d', sequenceLine)
.attr('d', d => sequenceLine(d.steps))
.style('stroke-width', d => {
if (!d[0]) return 0;
// Note: [0] is a non-elegant way to get the narrative id out of the first
// event in the narrative sequence
const styleProps = getNarrativeStyle(d[0].narrative);
if (!d) return 0;
const styleProps = getNarrativeStyle(d.id);
return styleProps.strokeWidth;
})
.style('stroke-dasharray', d => {
if (!d[0]) return 'none';
const styleProps = getNarrativeStyle(d[0].narrative);
if (!d) return 'none';
const styleProps = getNarrativeStyle(d.id);
return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
})
.style('stroke', d => {
if (!d[0]) return 'none';
const styleProps = getNarrativeStyle(d[0].narrative);
if (!d || app.narrative === null) return 'none';
if (d.id !== app.narrative.id) return '#232323';
const styleProps = getNarrativeStyle(d.id);
return styleProps.stroke;
})
.style('stroke-opacity', d => {
if (app.narrative === null) return 0;
if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2;
if (!d || d.id !== app.narrative.id) return 0.2;
return 1;
})
.style('fill', 'none');
.style('fill', 'none')
.style('cursor', 'pointer')
.on('click', d => {
console.log(d)
});
narrativesDom
.attr('d', d => sequenceLine(d.steps))
.style('stroke', d => {
if (!d[0]) return 'none';
const styleProps = getNarrativeStyle(d[0].narrative);
if (!d || app.narrative === null) return 'none';
if (d.id !== app.narrative.id) return '#232323';
const styleProps = getNarrativeStyle(d.id);
return styleProps.stroke;
})
.style('stroke-opacity', d => {
if (app.narrative === null) return 0;
if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2;
if (!d || d.id !== app.narrative.id) return 0.2;
return 1;
})
}
@@ -446,8 +451,8 @@ Stop and start the development process in terminal after you have added your tok
*/
function renderDomain () {
renderSites();
renderNarratives();
renderEvents();
renderNarratives();
}
function renderSelectedAndHighlight () {
renderSelected();