D3 Choropleth: TypeError: Не удается прочитать свойство «округи» неопределенного
Я слежу за хороплетом Майка Бостока руководство.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script type = "text/javascript" src = "https://d3js.org/d3-array.v1.min.js"></script>
<script type = "text/javascript" src = "https://d3js.org/d3-geo.v1.min.js"></script>
<script src = "https://unpkg.com/topojson-client@3"></script>
</script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<svg></svg>
<script>
us = d3.json("https://unpkg.com/us-atlas@1/us/10m.json")
const width = 960;
const height = 600;
const path = d3.geoPath();
const svg = d3.select("svg")
.attr("width",width)
.attr("height",height)
.style("width", "100%")
.style("height", "auto");
//svg-command
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
.append("title")
.text(d => format(data.get(d.id)));
format = d3.format("")
</script>
</html>
Я получаю ошибку Uncaught TypeError: Cannot read property 'counties' of undefined at check.html:32 (anonymous) @ check.html:32
Насколько я понимаю, команда svg добавляет элемент группы в качестве дочернего элемента к элементу svg. Он выбирает переменную пути и связывает округа, которые являются объектами в файле topojson. Команда topojson.feature() преобразует данные в формат GEOJson.
Все округа выбираются в команде enter(), так как в html-блоке нет буквы "g". Затем следующие команды присваивают каждому из них цвет и имя.
Используется ли topojson.feature?
Спасибо. Ваш комментарий заставил меня понять, что в учебнике используется старый d3. Я переключился на это, и это работает - bl.ocks.org/adamjanes/6cf85a4fd79e122695ebde7d41fe327f
Часть кода говорит .tickFormat(function(x, i) { return i ? x : x + "%"; }). Я прочитал? является встроенным оператором if/then. Означает ли это: для каждого индексированного значения i заменить x конкатом x и «%», а затем использовать этот новый массив для формата тиков?
Для первого значения, i == 0, i равно false, поэтому к значению будет добавлен знак процента. Для всех остальных индексов просто верните значение. В легенде вы увидите, что только первое значение имеет знак процента.
Итак, он говорит: верните i, если i ложно, то замените x на x + «%», иначе продолжите и верните x
Кроме возвращения i, да. Расширяясь, i ? x : x + "%" можно переписать как if (i) return x; else return x + "%";, каждое значение i, отличное от 0, будет истинным, поэтому это изменит только x для нулевого индекса.
@Sebastian Это тернарный оператор: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
topojson.feature все еще используется, но вы не передаете ему topojson - если вы зарегистрируете
us, вы увидите, что это не topojson (usне имеет свойства, называемого объектами, отсюда и ваша ошибка). Проблема заключается в том, как вы используете d3.json - попробуйтеd3.json("file", function(error, us) { ... map code ... })(для v4 v5 будет другим).