미리보기 URL: https://colombiatest-amxmtyotek.now.sh

좋아, 그래서 이것은 실제로 내 작업 중 하나에 대한 이야기입니다. 업워크와 비슷합니다. 그곳에서 많은 일자리를 얻을 수 있는 프리랜서 사이트이므로 제가 어떻게 이것을 얻었고 어떻게 얻었는지 이야기하겠습니다. 나는 이 일을 끝낸다

일자리 얻기

짧은 이야기가 너무 길어서 저는 콜롬비아에서 온 이 친구로부터 프리랜서로 일자리를 얻었습니다. 그는 csv를 통해 데이터를 보여줄 수 있는 지도를 만들고 싶어합니다. 모든 것이 잘 작동하지만 어느 시점에서 데이터가 서로 연결되지 않습니다. 먼저 데이터가 어떻게 보이는지 보여드리겠습니다.



그래서 그것은 작동하지만 내 고객은 다음과 같이 미리보기에서 보여 주는 최종 제품처럼 데이터가 연결되기를 원합니다.



csv와 d3.js를 로드하는 javascript를 수정하여 리플릿 맵에 표시됩니다. d3.js의 그래픽이 리플렛의 배경에 있기 때문에 표시되지 않는 것으로 나타났습니다. 이것이 제가 사용하는 코드입니다. 그것을 해결하기 위해:

 //creating networks using jsnetworkx
                  G = new jsnx.Graph();
                  var nodes = [], links = [];
                  for(var k = 0; k < link_csvdata.length; k++){
                    links.push([link_csvdata[k].source, link_csvdata[k].target, {weight: link_csvdata[k].strength}]);
                  }
                  for(var k = 0; k < node_csvdata.length; k++){
                    nodes.push([node_csvdata[k].node, {weight: node_csvdata[k].weight}]);
                  }
                  G.addNodesFrom(nodes); G.addEdgesFrom(links);
                  G.addEdgesFrom(links);
                  // var paths = jsnx.shortestPath(G, {source: "J6201", target: "J6130"});
                  // console.log(paths);

                  var graph_data = {
                    "neurons":  create_nodedata(node_csvdata),
                    "synapses": create_linkdata(link_csvdata, node_csvdata)
                  }

이것은 오픈 소스 코드가 아니기 때문에 코드의 스니펫일 뿐입니다. 따라서 일부 스니펫을 보여드리고 설명할 수 있습니다. 그래서 이것이 무엇을 하는지는 마커가 어디로 가야 하는지 모든 좌표에 대해 가지고 있는 csv의 일부를 취하는 것입니다. 연결했습니다.

더 알고 싶다면 여기에서 d3.js에 대해 언제든지 물어볼 수 있습니다. 아래에 의견을 남겨주세요.