Блог

Я хотел сделать карту размером 3 х 3 с точками в качестве их местоположения. когда вы нажимаете на точку, она изменяет используемый вами путь, т.е. Линия будет изменена на этот маршрут. Это цвет, а также положение строки, кто-нибудь знает, как это сделать? Это то, что у меня уже было. Теперь я не понимаю, как создать функцию, которая бы реализовывала эту функциональность.

 import React from "react";

import styled from 'styled-components';
import { scaleLinear } from "d3-scale";

var mapStyles = { position: "relative" };
var svgStyles = { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 };

function Map({ width, height, nodes }) {
  var xScale = scaleLinear()
    .domain([0, 100])
    .range([0, width]);
  var yScale = scaleLinear()
    .domain([0, 100])
    .range([0, height]);



return (
 <div id="map" style={mapStyles}>

  <svg
    style={svgStyles}
    width={width}
    height={height}
    viewBox={`0 0 ${width} ${height}`}
  >
    {links.map((link, i) => (
      <line
        key={i}
        x1={xScale(nodes[link.s].x)}
        x2={xScale(nodes[link.d].x)}
        y1={yScale(nodes[link.s].y)}
        y2={yScale(nodes[link.d].y)}
        strokeWidth={5}
        stroke={
          nodes[link.s].done === true amp;amp; nodes[link.d].done
            ? "#CBFF5B"
            : "grey"
        }
      />
    ))}
    {nodes.map((node, i) => (
      <circle
        key={i}
        cx={xScale(node.x)}
        cy={yScale(node.y)}
        r="20"
        fill={node.done === true ? "#CBFF5B" : "grey"}
      />
    ))}
  </svg>
</div>
  );
}

var nodes = [
  { x: 10, y: 10},
  { x: 10, y: 30, done: true },
    { x: 10, y: 50, done: true },
    { x: 50, y: 10, done: true},
    { x: 50, y: 30} ,
    { x: 50, y: 50 },
    { x: 90, y: 10 },
    { x: 90, y: 30 },
    { x: 90, y: 50 }
];

var links = [{ s: 3, d: 1 }, { s: 1, d: 2 }];

export const NodeMap = () => {

const avg = () => {
    var elem = [ 0, 1, 2,]
    var sum = 0;
    for( var i = 0; i < elem.length; i   ){
        sum  = parseInt( elem[i], 10 ); //don't forget to add the base
    }

    return sum/3;
}



return (
    <Container>
            <div className="App">
      <Map width={666} height={1340} nodes={nodes} links={links} />
    </div>
    </Container>
  );
};