Question

我正在尝试创建一组弯曲的文本弧。当我尝试并将文本放入圆圈时，它不会显示出来。我也不确定如何控制文本的方向。

是否有更复杂的构建方法 - 还需要隐藏原始文本 - 不确定是否要将文本放在另一个数据属性中

<div data-type="curve">some text that needs</div>

function curveme(el){

    var content = $(el).text();

    //Create the SVG
    var svg = d3.select(el).append("svg")
            .attr("width", 400)
            .attr("height", 120);


    //Create an SVG path            
    svg.append("path")
        .attr("id", "wavy") //very important to give the path element a unique ID to reference later
        .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //Notation for an SVG path, from bl.ocks.org/mbostock/2565344
        .style("fill", "none")
        .style("stroke", "#AAAAAA");


    /*
    var pi = Math.PI;

    var arc = d3.arc()
            .innerRadius(150)
            .outerRadius(180)
            .startAngle(0)
            .endAngle(pi/2)

    svg.append("path")
            .attr("d", arc)
            .attr("id", "wavy")
            .attr("transform", "translate(200,200)")
            .style("fill","none")
            .style("stroke", "#AAAAAA");
    */

    //Create an SVG text element and append a textPath element
    svg.append("text")
       .append("textPath") //append a textPath to the text element
        .attr("xlink:href", "#wavy") //place the ID of the path here
        .style("text-anchor","middle") //place the text halfway on the arc
        .attr("startOffset", "50%")     
        .text(content);
}



$('[data-type="curve"]').each(function(index) {
    curveme(this);
});

Answer 1

你问题的唯一可回答的部分是：

还需要隐藏原始文本

只需更改为：

function curveme(el) {
  var obj = $(el);
  var content = obj.text();
  obj.text("");

您的其他问题：

当我尝试并将文字放在圆圈中时，它不显示

这是什么意思？你的路径是一个圆圈，它不会工作？使用代码复制您的问题。

我也不确定如何控制文本的方向。

这是什么意思？开始对齐左边？对？垂直？

是否有更复杂的方法来构建它？

是的，不，也许吧。什么对你很复杂？这是受意见的，不适合stackoverflow。

如果你想添加它，这里是your code running。

Answer 2

我当时正试图关注网站的其他方面。我设法解决了这些问题。

＆＃34;还需要隐藏原文＆＃34; ^我获取文本，然后只清空div

＆＃34;当我尝试将文字放在圆圈中时，它并没有显示出来＆＃34; ^它没有正确翻译

＆＃34;我也不确定如何控制文本的方向。＆＃34; ^我想知道代码的哪个方面控制文本的方向，以避免它出现倒置或者它是否粘在内边缘或外面。

＆＃34;是否有更复杂的方法来构建它？＆＃34; ^我认为我有一个问题，你必须链接到弧和文本部分。

function getRandomNumber(s, e){
    return Math.floor(Math.random() * e) + s;
}

function curveme(el,index){

    var content = $(el).text();
    $(el).empty();

    var markerPointerSize = $(el).parent().find('.markerpointer').width();

    var diameter = markerPointerSize+32;

    //var diameter = 195;//large
    //var diameter = 125;//small
    radius = diameter/2;

    //Create the SVG
    var svg = d3.select(el).append("svg")
            .attr("width", diameter)
            .attr("height", diameter);

    var pi = Math.PI;

    var arc = d3.arc()
            .innerRadius(radius-20)
            .outerRadius(radius-15)
            .startAngle(getRandomNumber(-1, 0.5))
            .endAngle(pi);

    //Create an SVG path            
    svg.append("path")
        .attr("id", "wavy"+index) //very important to give the path element a unique ID to reference later
        .attr("d", arc)
        .attr("transform", "translate("+radius+","+radius+")")
        .style("fill", "none");

    //Create an SVG text element and append a textPath element
    svg.append("text")
       .append("textPath") //append a textPath to the text element
        .attr("xlink:href", "#wavy"+index) //place the ID of the path here
        .style("text-anchor","right") //place the text right on the arc
        .attr("startOffset", "0")       
        .text(content);
}


$('[data-type="curve"]').each(function(index) {
    curveme(this,index);
});

d3.js创建文本弧

2 个答案: