代码之家 › 专栏 › 技术社区 › Javascript Coder

无法在d3图表中使用符号

d3.js javascript

Javascript Coder · 技术社区 · 6 年前

我在我的项目中使用的是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");

以前是为circle工作的-这对circle来说很好。

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 使用like .attr("d", d3.svg.symbol().type("triangle-up")) 但这也行不通。

我试着引用 https://bl.ocks.org/feyderm/4d143591b66725aed0f1855444752fd9 和符号链接 https://github.com/d3/d3-shape#symbols 但我不能成功地使用它,任何指导。谢谢。

0 回复 | 直到 6 年前

-1

Meow 6 年前

<!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 shapes

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前