Добавление масштабированных кругов к многострочному графику

Question

Я следовал примеру отсюда https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f, чтобы создать аналогичный график.Тем не менее, у меня есть еще один столбец данных, который мне нужно использовать для создания кругов, которые соответствуют цвету линии, где радиус будет некоторым масштабированным значением этой записи в столбце.Итак, столбец 3 имеет значения вроде 873, 15, 1000, 1563 и т. Д. Я попытался сделать что-то вроде

svg.selectAll('circle').data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.close) })
    .attr("r", '5')
    .attr("fill", "red");

прямо под точкой, в которую мы добавляем путь (сразу после добавления пути строки значения вссылка), однако, очевидно, что это входит в круги только для одной строки.Я должен добавить их для обоих.

Answer 1

На самом деле вам нужно выбрать два круга, один для open, а другой для close:

svg.selectAll(null).data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.close) })
    .attr("r", '5')
    .attr("fill", "steelblue");

svg.selectAll(null).data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.open) })
    .attr("r", '5')
    .attr("fill", "red");

Вот код результата: https://bl.ocks.org/GerardoFurtado/4179c63daf38d85a266fb11f8e8e4c17/3786e4a0594e45e6e9a41df84bae4c6a43a86c6f