Voronoiポリゴンをホバリングするときに情報を表示する（d3.js）

StackOverflow https://stackoverflow.com//questions/21032067

  •  21-12-2019
  •  | 
  •  

質問

ボロノイ地域に関連する都市名と人口を見せたい。しかし、私がボロノイ地域を作った方法で、私は座標データのみを送信し、すべての図面を作業したり、より多くのデータを送ったりしたり、ボロノイ地域のどれも描かれていませんでした（B / Cは非表示を読むことができません）。データを座配するデータと、少なくともvoronoisを作成するときに、配列またはオブジェクト内で指定する方法はわかりません。私は（下にしたように）ツールチップの静的または無関係なデータを入力することができますが、実際のデータセットからは何もない。

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

var voronoi = d3.geom.voronoi()
        .clipExtent([[0, 0], [w, h]]);

d3.csv("us-cities1.csv", function(d) {
    return [projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat])[1]];
        }, function(error, rows) {
            vertices = rows;
            drawV(vertices);
            }
        );

function polygon(d) {
        return "M" + d.join("L") + "Z";
}

function drawV(d) {
    svg.append("g")
       .selectAll("path")
       .data(voronoi(d), polygon)
     .enter().append("path")
       .attr("class", "test")
       .attr("d", polygon)
       .attr("id", function(d, i){return i;})
       .on("mouseover", function(){return tooltip.style("visibility", "visible");})
       .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px").text((this).id);})
       .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

    svg.selectAll("circle")
       .data(d)
     .enter().append("circle")
       .attr("class", "city")
       .attr("transform", function(d) { return "translate(" + d + ")"; })
       .attr("r", 2);
        }
.

役に立ちましたか？

解決

あなたのデータを使って例をまとめて、どのようなLARSが言及しています。私はこのようなvoronoiのための変数を作成しました：

var voronoi = d3.geom.voronoi()
    .x(function(d) { return (d.coords[0]); })
    .y(function(d) { return (d.coords[1]); });
.

この bl.ock によって取られた。これにより、座標の配列を指定し、それでも表示したい説明データに接続されていることがあります。

その後、voronioポリゴンで使用できる形式ですべてのデータを格納するオブジェクトを作成します。

cities.forEach(function (d,i) {
    var element = { 
            coords: projection([+d.lon, +d.lat]),
            place: d.place,
            rank: d.rank,
            population: d.population
        };
    locCities.push(element);
});
.

voronio変数の座標の変換を指定してから、cities変数を使用しただけでなく、わかりませんでした。

ToolTipsにタイトル属性を使用しましたが、これはあなたがあなたのコードに持っているもののようなより適切なものに置き換えることができます。関連するコードは次のとおりです。

.append("title") // using titles instead of tooltips 
    .text(function (d,i) { return d.point.place + " ranked " + d.point.rank; });
.

データにいくつかの問題がありました。 Gejsonを正しくレンダリングするには、旧バージョンのD3（3.1.5）を使用しなければなりませんでした。私はAlberusa ProjectionにChnangesの数があったので、そこに問題があります。

私のために私のために都市のいくつかの場所が間違っているようです。例えば、San Fanciscoはフロリダのどこかに表示されます（これは私にいくつかの混乱を引き起こしました）。だから私はオリジナルのCSVファイルをチェックし、座標はそこで間違っているように見え、データはそれがあるべき場所をレンダリングしています（ラベルに従って期待される場所ではありません）。

今それをまとめてあなたはそれを見つけることができますここ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top