Question

有人可以帮助我使用d3js创建下面的图像。我可以根据需要创建饼图，但坚持使用箭头和所有内容渲染外部文本。

据我所知，我使用下面的代码创建了圆圈。

public override bool OnTouchEvent(MotionEvent e)
{
    if (m_GestureDetector.OnTouchEvent(e))
    {
        m_PreviousMoveX = (int)e.GetX();
        m_PreviousMoveY = (int)e.GetY();
        return true;
    }

    var touchCount = e.PointerCount;
    switch (e.Action)
    {
        case MotionEventActions.Down:
        case MotionEventActions.Pointer1Down:
        case MotionEventActions.Pointer2Down:
            {
                if (touchCount >= 2)
                {
                    var distance = this.Distance(e.GetX(0), e.GetX(1), e.GetY(0), e.GetY(1));
                    m_PreviousDistance = distance;
                    m_IsScaling = true;
                    var parent = this.Parent;
                    var scrollview = parent.Parent;
                    scrollview.RequestDisallowInterceptTouchEvent(true);
                    scrollview.Parent.RequestDisallowInterceptTouchEvent(true);
                }
            }
            break;

        case MotionEventActions.Move:
            {
                if (touchCount >= 2 && m_IsScaling)
                {
                    var distance = this.Distance(e.GetX(0), e.GetX(1), e.GetY(0), e.GetY(1));
                    var scale = (distance - m_PreviousDistance) / this.DispDistance();
                    m_PreviousDistance = distance;
                    scale += 1;
                    scale = scale * scale;
                    this.ZoomTo(scale, m_Width / 2, m_Height / 2);
                    this.Cutting();
                }
                else if (!m_IsScaling)
                {
                    var distanceX = m_PreviousMoveX - (int)e.GetX();
                    var distanceY = m_PreviousMoveY - (int)e.GetY();
                    m_PreviousMoveX = (int)e.GetX();
                    m_PreviousMoveY = (int)e.GetY();

                    m_Matrix.PostTranslate(-distanceX, -distanceY);
                    this.Cutting();
                }
            }
            break;

        case MotionEventActions.Up:
        case MotionEventActions.Pointer1Up:
        case MotionEventActions.Pointer2Up:
            {
                if (touchCount <= 1)
                {
                    m_IsScaling = false;
                    var parent = this.Parent;
                    var scrollview = parent.Parent;
                    scrollview.RequestDisallowInterceptTouchEvent(false);
                    scrollview.Parent.RequestDisallowInterceptTouchEvent(false);
                }
            }
            break;
    }
    return true;
}

Answer 1

文本和箭头是两个独立的问题，可能值得他们自己提问。

曲线文字 要使用d3在路径上执行文本，您可能需要查看textpath文档。这会有点棘手;基本上，您需要创建第二个 d3.arc()生成器，其外半径略长。使用较长的一个在SVG的d对象中设置path元素（您需要创建的）的defs属性，并引用那些path元素{{1来自id元素的（您还需要创建）。

弯曲的箭头 要完全像图像那样完成此操作，您可能需要自己构建textpath属性的一些手动构建（包括计算数学！）以添加适当的箭头（请参阅SVG路径syntax ）。如果你正在做一个静态图像，那么创建直线可能会更快（再次使用更长半径的d生成器），并将SVG与SVG crowbar之类的东西一起导出到绘图程序中像Illustrator或Inkscape，并在那里添加箭头。

svg - 在圆弧d3js外对齐文本

1 个答案: