Я использую диаграмму d3 в моей версии проекта, используемой версии 4,

Песочница «Мой код» - https://codesandbox.io/s/lucid-morning-bi9vc

Я пытаюсь использовать символ треугольника вместо круга на линейной диаграмме

Код -

g.selectAll(".point")
      .data(data)
      .enter()
      .append("path")
      .attr("d", d3.symbolTriangle)
      .attr("transform", function(d) {
        return (
          "translate(" + xScale(d.startTime) + "," + yScale(d.magnitude) + ")"
        );
      })
      .style("fill", "red")
      .attr("class", "point");

Ранее для круга - это нормально работало для круга.

g.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return xScale(d.startTime);
      })
      .attr("cy", function(d) {
        return yScale(d.magnitude);
      })
      .attr("r", function(d) {
        return 6;
      })

Я следил за этим -

https://bl.ocks.org/mbostock/3244058 использовать как .attr("d", d3.svg.symbol().type("triangle-up")), но это тоже не работает.

Я попытался сослаться на https://bl.ocks.org/feyderm/4d143591b66725aed0f1855444752fd и symbolfd https://github.com/d3/d3-shape#symbols, но я не смог использовать его успешно, никаких указаний. Спасибо.

0
Javascript Coder 28 Ноя 2019 в 09:31
Хм, если вы раскомментируете строки 635-637 кода песочницы, все будет нормально.
 – 
altocumulus
28 Ноя 2019 в 13:53
Да, потому что я внес изменения, чтобы заставить его работать.
 – 
Javascript Coder
28 Ноя 2019 в 13:57
codeandbox.io/s/lucid-morning-bi9vc @altocumulus вы можете мне помочь, если Я хочу, чтобы круг и треугольник были на одной линии, возможно ли? с условиями?
 – 
Javascript Coder
28 Ноя 2019 в 13:58
Я не уверен, что понимаю, что вы ищете. Однако это новый вопрос. Я предлагаю вам поместить его в другой пост и либо удалить его, либо вместо этого написать самостоятельный ответ.
 – 
altocumulus
28 Ноя 2019 в 14:01
Я все еще утверждаю, что я бы предпочел, чтобы это либо получил достойный ответ, либо было удалено вообще.
 – 
altocumulus
28 Ноя 2019 в 16:59

1 ответ

<!DOCTYPE html>
<!--TRY Triangle-->
<div id="chart"></div>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script type="text/javascript">

    var svg_dx = 800, 
        svg_dy = 400,
        margin_x = 100;
        //Triangle shape//
    var shapes = [ 
                   d3.symbolTriangle ];

    var x = d3.scalePoint()
              .domain(d3.range(0, shapes.length))
              .range([margin_x, svg_dx - margin_x]);

    var svg = d3.select("#chart")
                .append("svg")
                .attr("width", svg_dx)
                .attr("height", svg_dy);

    var symbol = d3.symbol().size([1500]),
        color = d3.schemeCategory10;

    var drag_behavior = d3.drag()
                          .on("start", dragstarted)
                          .on("drag", dragged);
    svg.append("g")
       .selectAll("path")
       .data(shapes)
       .enter()
       .append("path")
       .attr("d", symbol.type(shape => shape))
       .attr("transform", (shape, i) => "translate(" + x(i) + ", -40)")
       .style("fill", (shape, i) => color[i])
       .call(drag_behavior)
       .transition()
       .duration((shape, i) => i * 800)
       .attr("transform", (shape, i) => "translate(" + x(i) + "," + (svg_dy / 2) + ")");

    function dragstarted() {
      d3.select(this).raise();
    }

    function dragged(shape) {

        var dx = d3.event.sourceEvent.offsetX,
            dy = d3.event.sourceEvent.offsetY;

        d3.select(this)
          .attr("transform", shape => "translate(" + dx + "," + dy + ")");
    }

</script>

D3 v4 формы

-1
Meow 28 Ноя 2019 в 09:48
Я использую .attr( "d", d3.svg .symbol() .size(81) .type("triangle-up") ), но мне кажется, это должно сработать. есть проблема с версией?
 – 
Javascript Coder
28 Ноя 2019 в 09:53
Вы поделились той же ссылкой, что и я.
 – 
Javascript Coder
28 Ноя 2019 в 09:55