Блог

Главная - Вопросы по программированию - d3 — пунктирная линия от точки данных к оси (видна на dimplejs.org )

d3 — пунктирная линия от точки данных к оси (видна на dimplejs.org )

#d3.js

#d3.js

Вопрос:

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

Я ищу решение, как я могу этого добиться, или просто пример…. Благодарен за любой совет!!

введите описание изображения здесь

Обновление 1

Это работает, и я могу рисовать линии. Теперь я хочу нарисовать его более анимированным — возможно ли это с помощью svg:line?

 var dpX = d3.select(this).attr('x');
var dpY = d3.select(this).attr('y');

                var myLine = d3Chart.append("svg:line")
                    .attr("class", 'd3-dp-line')
                    .attr("x1", dpX)
                    .attr("y1", dpY)
                    .attr("x2", 0)
                    .attr("y2", dpY)
                    .style("stroke-dasharray", ("3, 3"))
                    .style("stroke-opacity", 0.9)
                    .style("stroke", dpChannel.Color);

Комментарии:

1. Я ищу ту же функцию!! Могу ли я увидеть код ur

Ответ №1:

Вы можете построить линии с двумя точками каждая:

  • горизонтальная линия будет иметь одну точку с координатами (0, circleY) и (circleX, circleY)
  • вертикальный будет иметь (circleX,0) и (circleX, circleY) .

Где, конечно circleX , и circleY — координаты окружности на изображении

Комментарии:

1. что вы подразумеваете под «более анимированным»? если вы хотите, чтобы они шли от оси к окружности, вы можете установить начальные точки равными 0,0 для обеих точек линии, а затем перевести их в координаты окружности

Ответ №2:

Вы можете увидеть, как именно dimple делает это здесь: https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/methods/_showPointTooltip.js Строки 65 — 106. T

 // Add a drop line to the x axis
if (dropDest.y !== null) {
    chart._tooltipGroup.append("line")
        .attr("x1", cx)
        .attr("y1", (cy < dropDest.y ? cy   r   series.lineWeight   2 : cy - r - series.lineWeight - 2))
        .attr("x2", cx)
        .attr("y2", (cy < dropDest.y ? cy   r   series.lineWeight   2 : cy - r - series.lineWeight - 2))
        .style("fill", "none")
        .style("stroke", fill)
        .style("stroke-width", 2)
        .style("stroke-dasharray", ("3, 3"))
        .style("opacity", opacity)
        .transition()
        .delay(animDuration / 2)
        .duration(animDuration / 2)
        .ease("linear")
        .attr("y2", (cy < dropDest.y ? dropDest.y - 1 : dropDest.y   1));
}

// Add a drop line to the y axis
if (dropDest.x !== null) {
    chart._tooltipGroup.append("line")
        .attr("x1", (cx < dropDest.x ? cx   r   series.lineWeight   2 : cx - r - series.lineWeight - 2))
        .attr("y1", cy)
        .attr("x2", (cx < dropDest.x ? cx   r   series.lineWeight   2 : cx - r - series.lineWeight - 2))
        .attr("y2", cy)
        .style("fill", "none")
        .style("stroke", fill)
        .style("stroke-width", 2)
        .style("stroke-dasharray", ("3, 3"))
        .style("opacity", opacity)
        .transition()
        .delay(animDuration / 2)
        .duration(animDuration / 2)
        .ease("linear")
        .attr("x2", (cx < dropDest.x ? dropDest.x - 1 : dropDest.x   1));
    }

Это явно использует некоторые внутренние переменные и функции dimple, но это потому, что мне приходится иметь дело с множеством потенциальных перестановок. Если вы кодируете одну диаграмму, вы можете заменить их фиксированными значениями.

Метки: