From 4cef6bd8ca07b242df3d56651cafa9a5c0d6e127 Mon Sep 17 00:00:00 2001 From: Dave Palay Date: Thu, 19 Sep 2019 15:21:02 -0500 Subject: [PATCH] more interactivity --- index.html | 443 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 249 insertions(+), 194 deletions(-) diff --git a/index.html b/index.html index ff6e962..cba1afa 100644 --- a/index.html +++ b/index.html @@ -1,227 +1,282 @@ - - + Chart - + - + - + - - - + - + + + +
-
-
-
    -
    -
    - - 5 -
    -
    +
    +
    + Current Step: 0 +
    +
    + List of Links: +
    + +
    +
    +
    + + 0 +
    +
    +
    +
      + +
      - + slider.on("input", change); + /* + d3.select("#valDown").on("click", () =>{ + slider.attr("value",+slider.attr("value") + 1) + d3.select("#slider-value").text(slider.attr("value"))}) + + d3.select("#valUp").on("click", () =>{ + slider.attr("value",+slider.attr("value") + 1) + d3.select("#slider-value").text(slider.attr("value"))}) + */ + // Redraw + function change() { + // Reset variables + let points = +this.value; + // update the slider value + d3.select("#slider-value").text(points); + + // Remove old + d3.selectAll(".link").remove(); + let tmpLinks = []; + let linkStr = `` + let indent = 0; + d3.select("#listOfLinks").html(converter.makeHtml(linkStr)) + + d3.selectAll("circle") + .filter((data, i) => i <= points) + .each((d, i, arr) => { + + tmpLinks = i==0 ? d.linksTo : d.linksFrom.slice(1) + linkStr += `${new Array(indent).fill(" ").join("")}* ${d.portal.title}\n` + console.log(d) + // add the lines to the svg + d3.select(".links") + .selectAll("lines") + .data(tmpLinks) + .enter() + .append("line") + .attr("class", "link") + .attr("x1", (d, i) => x(d.source.x)) + .attr("y1", (d, i) => y(d.source.y)) + .attr("x2", (d, i) => x(d.dest.x)) + .attr("y2", (d, i) => y(d.dest.y)) + .attr("id", (d, i) => `${d.source.title}_${d.dest.title}`) + .attr("SourceId", (d, i) => `${d.source.x}|${d.source.y}`) + .attr("DestId", (d, i) => `${d.dest.x}|${d.dest.y}`); - \ No newline at end of file + d3.select("#currentStep").text(i) + }); + d3.select("#listOfLinks").html(converter.makeHtml(linkStr)) + console.log(linkStr) + console.log(converter.makeHtml(linkStr)) + + } // Finishes Change Function + + +