javascript - Aster Plot 图例标签和圆弧-6ren

javascript - Aster Plot 图例标签和圆弧

转载作者：行者123 更新时间：2023-11-29 19:30:34

25

4

我在我的项目中使用 d3 的 aster plot。我想要图例标签以及圆外的圆弧半径。

我可以获得一个饼图示例，显示圆弧沿线和圆弧外的标签。 http://bl.ocks.org/Guerino1/2295263

但我无法在 d3 的 aster plot 中实现相同的功能。 http://bl.ocks.org/bbest/2de0e25d4840c68f2db1

如有任何帮助，我们将不胜感激。谢谢

最佳答案

有几件事需要解决。

1.) 您必须在标签的 aster 图中引入边距。

2.) 然后你必须采用外弧，添加一个 svg g 你可以用文本对路径进行分组吗:

var outerGroup = svg.selectAll(".solidArc")
  .data(pie(data))
  .enter()
  .append("g")

outerGroup
  .append("path")
  .attr("fill", function(d) { return d.data.color; })
  .attr("class", "solidArc")
  .attr("stroke", "gray")
  .attr("d", arc)
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

outerGroup
  .append("text")
  .attr("transform", function(d) {
    return "translate(" + centroid(60, width, d.startAngle, d.endAngle) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) { return d.data.label });

请注意，我必须创建自己的质心函数才能将标签移到弧外。您链接的饼图示例中的代码对我不起作用(它使用的是旧的 d3 版本)。

这是我从 d3 源代码中窃取的质心函数:

function centroid(innerR, outerR, startAngle, endAngle){
  var r = (innerR + outerR) / 2, a = (startAngle + endAngle) / 2 - (Math.PI / 2);
  return [ Math.cos(a) * r, Math.sin(a) * r ];
}

这是一个 working example .

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>

    <style type="text/css">
        .slice text {
            font-size: 16pt;
            font-family: Arial;
        }
    </style>
</head>
<body>
<script type="text/javascript">

    var canvasWidth = 500, //width
            canvasHeight = 500,   //height
            outerRadius = 150,   //radius
            //outerRadius =  Math.min(canvasWidth, canvasHeight) / 2,
            color = d3.scale.category20(); //builtin range of colors
    innerRadius =0
    var colorsArray = ['#0099ff','#cc00ff','#ff3366','#cc3300','#ff6600','#ffff33','#cccc00','#0066ff'];
    var dataSet = [
        {"legendLabel":"Testing Text Is", "magnitude":30,'score':4.8,width:20,color:colorsArray[0] },
        {"legendLabel":"Two", "magnitude":8,'score':3.2,width:20,color:colorsArray[1] },
        {"legendLabel":"Three", "magnitude":40,'score':3.9,width:20,color:colorsArray[2] },
        {"legendLabel":"Four", "magnitude":50,'score':3.1,width:20,color:colorsArray[3] },
        {"legendLabel":"Five", "magnitude":16,'score':4.2,width:20,color:colorsArray[4] },
        {"legendLabel":"Six", "magnitude":50,'score':3.1,width:20,color:colorsArray[5] },
        {"legendLabel":"Seven", "magnitude":30,'score':4.3,width:20,color:colorsArray[6] },
        {"legendLabel":"Eight", "magnitude":20,'score':2.3,width:20,color:colorsArray[7] }
       ];

    var vis = d3.select("body")
            .append("svg:svg")
            .data([dataSet])
            .attr("width", canvasWidth)
            .attr("height", canvasHeight)
            .append("svg:g")
            .attr("transform", "translate(" + 1.5*outerRadius + "," + 1.5*outerRadius + ")") // relocate center of pie to 'outerRadius,outerRadius'

    var arc = d3.svg.arc()
            .outerRadius(outerRadius);
    var arc1 = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(function (d) {
                return (outerRadius - innerRadius) * (d.data.score / 5.0) + innerRadius;
            });

    var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d.width; });

    // Select all <g> elements with class slice (there aren't any yet)
    var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("svg:g")
            .attr("class", "slice");

    arcs.append("svg:path")
        //set the color for each slice to be chosen from the color function defined above
            .attr("fill", function(d, i) { return d.data.color; } )
        //this creates the actual SVG path using the associated data (pie) with the arc drawing function
            .attr("d", arc1);



  var text = arcs.append("svg:text")
            .attr("transform", function(d) {
                d.outerRadius = outerRadius + 75;
                d.innerRadius = outerRadius + 70;
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle") //center the text on it's origin
            .style("fill", "black")
            .style("font", "bold 12px Arial")
     
    .each(function (d) {   
      var arr = d.data.legendLabel.split(" ");
      if (arr != undefined) {
          for (i = 0; i < arr.length; i++) {
              d3.select(this).append("tspan")
                  .text(arr[i])
                  .attr("dy", i ? "1.2em" : 0)
                  .attr("x", 0)
                  .attr("text-anchor", "middle")
                  .attr("class", "tspan" + i);
          }
      }
    });


    //.text(function(d, i) { return dataSet[i].legendLabel; })
         // .html(function(d, i) { return  '<tspan>'+dataSet[i].legendLabel+'</tspan></n><tspan>'+dataSet[i].score+'</tspan>'})
   /* arcs.append("foreignObject")
            .attr("transform", function(d) {
                d.outerRadius = outerRadius + 75;
                d.innerRadius = outerRadius + 70;
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("width", 50)
            .attr("height", 50)
            .append("xhtml:body")
            .style("font", "14px 'Helvetica Neue'")
            .html(function(d, i) { return dataSet[i].legendLabel+'<br>'+dataSet[i].score; });*/




</script>
</body>
</html>

关于javascript - Aster Plot 图例标签和圆弧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27873631/

25

4

0

文章推荐： php - 拉拉维尔 5.3 : Many to many realtionship's data

文章推荐： javascript - 在使用javascript上传之前获取文件大小

文章推荐： JavaScript 日期到 MySQL 日期时间转换

plotly - plotly 标签
我想更改 plotly(_express) 图中的构面标签。剧情如下: import plotly.express as px tips = px.data.tips() fig = px.scatt
plotly - Plotly 中所有地理范围的列表
我正在尝试使用 plotly.js 在 map 上绘制数据。我知道您可以通过以下方式获得一个国家/地区的 map : layout = dict( title = '',
plotly - Plotly 的默认色标是什么？
关于 this page暗示他们有一些默认的色标，例如“Viridis”。我终其一生都找不到一个网页来记录这些命名的色标是什么。最佳答案问题是我是英国人并且正确拼写了颜色。色标可在 https:/
r - 如何在 plotly 中为子 plotly 中的所有 plotly 强制使用相同的颜色？
在下面的示例中，我在一个 plotly 子图中有四个箱形图。此示例中的四个箱形图中的每一个都有 3 个变量:股票、债券和现金。在每个箱线图中，我希望股票以相同的颜色(例如蓝色)显示，债券以相同的颜色(
javascript - plotly:删除 plot 并在同一个 div 中创建一个新的 plot
我有一个 plotly plot，当数据发生变化时，我想删除 plot 并生成一个新 plot。为此，我这样做: $('#heatmap2').empty() 然后我重新生成我的 plotly 。但是
python - Plotly:如何使用 plotly.graph_objects 和 plotly.express 在图形中定义颜色？
有许多问题和答案以一种或另一种方式涉及这个主题。有了这个贡献，我想清楚地说明为什么一个简单的方法，比如 marker = {'color' : 'red'}将适用于 plotly.graph_obje
python - 为什么 matplotlib .plot(kind ='bar' ) plot 与 .plot() 如此不同
这可能是一个非常愚蠢的问题，但是当使用 .plot() 绘制 Pandas DataFrame 时，它非常快并且会生成具有适当索引的图形。一旦我尝试将其更改为条形图，它似乎就失去了所有格式并且索引
python - plotly dash - 使用 plotly 生成图像，在本地保护它并使用 plotly dash 显示它
我用 plotly (express) 生成了很多图像，并将它们以 png 格式保存在本地目录中。我想创建一个带有 plotly dash 的仪表板。我生成的图像有很多依赖关系:这就是我不想将代码包含
python - 交互式 plotly 的 plotly 表达与Altair/Vega-Lite的 plotly 比较
最近，我正在学习Plotly express和Altair/Vega-Lite进行交互式绘图。他们两个都令人印象深刻，我想知道他们的优点和缺点是什么。尤其是对于创建交互式地块，它们之间有什么大差异，何
plotly:从直方图中获取值/plotly:从轨迹中获取值
在 plotly 中，我可以创建一个直方图，例如in this example code from the documentation : import plotly.express as px df
plot - Julia plot 函数数组问题
来自 Matlab 我正在努力弄清楚为什么以下不起作用: plot(x=rand(10),y=rand(10)) 正确生成图表。 x=rand(10) y=rand(10) plot(x,y) 产生错
plot - 自定义图例标签 - geopandas.plot()
我和一位同事一直在尝试设置自定义图例标签，但到目前为止都失败了。下面的代码和详细信息 - 非常感谢任何想法! 笔记本:toy example uploaded here 目标:将图例中使用的默认比率值
plotly - 如何使用 Plotly 控制哪些跟踪图位于顶部？
我正在使用 Plotly python 库生成一个带有几个 fiddle 图和几个填充散点图的图形。无论什么订单我都有个人fig.add_trace在我的代码中调用， fiddle 图总是在散点图后面
plot - 删除 Plotly 中图表之间的差距
我将图表的大小配置为 Shiny 但图表之间仍有空白区域它们在配置高度和宽度之前显示为旧区域这是我的代码 plot1_reactive % layout(xaxis = xaxis,
plotly - 如何组织一个有 plotly 的破折号项目？
我想弄清楚如何组织一个包含多个应用程序的破折号项目。所有示例都是单页应用程序，我希望将多个破折号组织为一个项目，由 gunicorn 运行(在 docker 容器内): dash-project/
Julia Plotly 不显示带有子图的 plotly
我之前做了一些解决方法来在 Julia Plotly 中实现精彩的子图，但目前正在努力解决一个更复杂的问题。下面有三种方法可以完成这项工作。 draw1 完美地完成了，但不适用于我的情况，draw2
plotly - 删除 Plotly 中子图之间的空间？
我的子图之间有很大的空间。在 matplotlib 中，有一种称为紧密布局的布局可以消除这种情况。 plotly 有没有类似的布局？我正在 iPython 笔记本中绘图，因此空间有限。请参阅下图中的空
plotly - plot.ly 热图色标不起作用
我正在尝试获取我提前生成的 cbrewer Reds 颜色图。但是，当我尝试使用它时，我仍然得到一些默认的颜色图。我究竟做错了什么？这是 plotly :https://plot.ly/~smirno
plotly - Plot.ly - 图例中同一键的多条轨迹
我一直在使用 plot.ly 并希望将多个跟踪分组到图例中的同一个键。我有显示有关特定用户的数据的子图。我想让每个键代表一个用户，而不是 user.data1、user.data2 等。这是我现在
plot - 如何从 Plotly 中删除轴和数字
我有下面这张图，我想把除点和三角形以外的所有东西都去掉，意思是横纵轴上的数字和小竖线，我该怎么做？这是图片: 这是我的代码: x0 = np.average(triangleEdges,axis=0

首页

博学

6Ren·AI

商城

javascript - Aster Plot 图例标签和圆弧