Member 8840306 Ответов: 0

Как запустить код и получить необходимый вывод на сайте “observablehq”

Я новичок d3.js .я пытаюсь запустить код на этом этапе ссылкаДля запуска этого кода я поместил этот код в index.js файл.
d3 = require("d3@5")
height = 500
margin = ({top: 10, right: 10, bottom: 20, left: 40})
data = Object.assign(d3.csvParse(await FileAttachment("data.csv").text(), d3.autoType), {y: "Population"})
groupKey = data.columns[0]
keys = data.columns.slice(1)
x0 = d3.scaleBand()
    .domain(data.map(d => d[groupKey]))
    .rangeRound([margin.left, width - margin.right])
    .paddingInner(0.1)
x1 = d3.scaleBand()
    .domain(keys)
    .rangeRound([0, x0.bandwidth()])
    .padding(0.05)
y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice()
    .rangeRound([height - margin.bottom, margin.top])
color = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"])
xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x0).tickSizeOuter(0))
    .call(g => g.select(".domain").remove())
yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(null, "s"))
    .call(g => g.select(".domain").remove())
    .call(g => g.select(".tick:last-of-type text").clone()
        .attr("x", 3)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text(data.y))
legend = svg => {
  const g = svg
      .attr("transform", `translate(${width},0)`)
      .attr("text-anchor", "end")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
    .selectAll("g")
    .data(color.domain().slice().reverse())
    .join("g")
      .attr("transform", (d, i) => `translate(0,${i * 20})`);

  g.append("rect")
      .attr("x", -19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", color);

  g.append("text")
      .attr("x", -24)
      .attr("y", 9.5)
      .attr("dy", "0.35em")
      .text(d => d);
}
chart = {
    const svg = d3.select(DOM.svg(width, height));

    svg.append("g")
        .selectAll("g")
        .data(data)
        .join("g")
        .attr("transform", d => `translate(${x0(d[groupKey])},0)`)
        .selectAll("rect")
        .data(d => keys.map(key => ({key, value: d[key]})))
        .join("rect")
        .attr("x", d => x1(d.key))
        .attr("y", d => y(d.value))
        .attr("width", x1.bandwidth())
        .attr("height", d => y(0) - y(d.value))
        .attr("fill", d => color(d.key));

    svg.append("g")
        .call(xAxis);

    svg.append("g")
        .call(yAxis);

    svg.append("g")
        .call(legend);

    return svg.node();
}


После этого я позвонил index.js файл из html скрипта


<html>
<head>
    <title>Visualization 2 (Multiline graph)</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="index.js"></script>
</body>
</html>


Я создал файл data.csv из массива
State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
FL,1140516,1938695, 925060,1607297,4782119,4746856,3187797
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
PA,737462,1345341,679201,1203944,3157759,3414001,1910571

Этот код не дает требуемого вывода, который является этим графиком.
диаграмма
Как получить необходимый результат.

Обновление: Код дает мне следующую ошибку в vizhub
SyntaxError: Unexpected keyword 'const' (57:4)
/index.js (line 57)
53 :       .attr("dy", "0.35em")
54 :       .text(d => d);
55 : }
56 : chart = {
57 :     const svg = d3.select(DOM.svg(width, height));
         ^


Что я уже пробовал:

Вот вижуб ссылка на код

Richard MacCutchan

Уберите слово "const" в строке 57. Как только вы это сделаете, попробуйте еще раз и посмотрите, работает ли это. Если это не работает то пожалуйста используйте Улучшить вопрос ссылка выше, и добавить соответствующие детали того, что не удается, какой результат вы ожидаете увидеть, и что вы на самом деле видите.

Member 8840306

удаление ключевого слова 'const' дает еще одну ошибку в той же строке
СВГ = Д3.выберите(дом.СВГ(ширина, высота));// синтаксис ошибка: непредвиденная лексема

Richard MacCutchan

Извините, но мы не можем угадать, на какое слово он жалуется. Возможно, вам следует проверить документацию на предмет правильного синтаксиса этих команд.

0 Ответов