Как добавить метку в каждое состояние в d3.в JS (albersUsa)?

на us.json загружается, но когда я пытаюсь добавить имя метки, я не могу заставить его работать. Я не вижу свойства name в .json file Итак, как я могу добавить каждое имя состояния? Я действительно Новичок в этой структуре.

Я пробую другой учебник по Google и Stackoverflow, но ни один из них не работает для меня. Вот ссылка на пару учебник, который я пробовал, что я думаю, достоин.

проблемы у меня есть:

  1. я думаю, что мне не хватает свойства имени в нас.файл json. (если это проблема, то есть ли какая-то другая .файл json, который включает имя состояния? И как использовать имя с этим файлом?)
  2. имя штата США включено в http://d3js.org/topojson.v1.min.js?

(Рамки Загружено)

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

:

var width = 1500,
    height = 1100,
    centered;


var usData = ["json/us.json"];
var usDataText = ["json/us-states.json"];

var projection = d3.geo.albersUsa()
    .scale(2000)
    .translate([760, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .style("width", "100%")
    .style("height", "100%");


svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", clicked);

var g = svg.append("g");

d3.json(usData, function(unitedState) {
  g.append("g")
    .attr("class", "states-bundle")
    .selectAll("path")
    .data(topojson.feature(unitedState, unitedState.objects.states).features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "states")
    .on("click", clicked);
});

спасибо всем в advanced. Я также признателен, если вы скажете мне, где вы узнали d3.js.

1 ответов


как вы отметили свой us.json в нем нет имен состояний. Однако у него есть уникальные идентификаторы, и, к счастью, Мистер Босток сопоставил эти идентификаторы с именами здесь.

Итак, давайте немного исправим этот код.

во-первых, сделать json запросы, чтобы вытащить данные:

// path data
d3.json("us.json", function(unitedState) {
  var data = topojson.feature(unitedState, unitedState.objects.states).features;
  // our names
  d3.tsv("us-state-names.tsv", function(tsv){
    // extract just the names and Ids
    var names = {};
    tsv.forEach(function(d,i){
      names[d.id] = d.name;
    });

теперь добавьте нашу визуализацию:

// build paths
g.append("g")
  .attr("class", "states-bundle")
  .selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("stroke", "white")
  .attr("class", "states");

 // add state names
 g.append("g")
  .attr("class", "states-names")
  .selectAll("text")
  .data(data)
  .enter()
  .append("svg:text")
  .text(function(d){
    return names[d.id];
  })
  .attr("x", function(d){
      return path.centroid(d)[0];
  })
  .attr("y", function(d){
      return  path.centroid(d)[1];
  })
  .attr("text-anchor","middle")
  .attr('fill', 'white');

  ....

вот работает пример.