javascript - 获取 d3 中的质心坐标-6ren

javascript - 获取 d3 中的质心坐标

转载作者：行者123 更新时间：2023-12-03 07:36:19

我试图将一个小圆圈附加到我制作的饼图中的弧形质心，质心返回 x 和 y 坐标值的数组，因此我尝试使用数组索引 [0],[1]

<!doctype HTML>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">

        <script type="text/javascript" src="js/d3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body>

        <script type="text/javascript">

            //=================================================================================================================
            // initializing variables 


            var data = []; // empty array to hold the objects imported from the JSON file
            var oRadius = 300; //var holding value for the outer radius of the arc
            var iRadius = 80;  //var holding the value for the inner radius of the arc
            var cRadius = 3;   //var holding the value for the corner radius of the arc
            var colors = d3.scale.category20b();//built in D3 function to color pieces of data
            var width = 1400; //setting the width of the svg
            var height = 1000; //setting the height of the svg
            var dRadius = 5; //setting the radius for the dots
            var sColor = "white"; // color for the stroke of the arcs
            var dStrokeColor = "#666";
            var dFillColor  = "#ccc"
            var myChart;

            var myArcMaker= d3.svg.arc().outerRadius(oRadius).innerRadius(iRadius).cornerRadius(cRadius); //var that creates the arc
            var bigArcMaker=  d3.svg.arc().outerRadius(400).innerRadius(oRadius).cornerRadius(cRadius);

            var  mySvg =  d3.select('body')
                          .append('svg')
                          .attr('width', width)
                          .attr("height", height) //selecting the body and appending an, then svg setting the height and width properties for the svg
                          .append("g")
                          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")// centers the pie chart in the center of the svg


            mySvg.append("g")
            .attr("class", "slices");
            mySvg.append("g")
           .attr("class", "dots");
            mySvg.append("g")
           .attr("class", "lines");



            var myPie =  d3.layout.pie()
                        .sort(null)
                        .startAngle(2*(Math.PI))
                        .endAngle(((Math.PI))/360)
                        .padAngle(-1.5*(2*(Math.PI))/360).value(function(d){return d.value}); //setting the values for that start angle, end angle and pad angle for the arcs and takes in the the values from the objects in the data array


            //===================================================================================================================

                 d3.json("data.json", function (json) // importing the json file
            {

                data = json; // setting the empty data array equal to the values of the objects in the json file
                visual(); // this function holds all the d3 code to create the arc

            })




            function visual() // this function prevents the code that creates the arc from running before the objects from the json file are added into the empty data array
            {

                console.log(data); // checking to see if the objects are loaded into the data ray using the console in chrome


                  var z = function(d) {return myArcMaker.centroid()}
                  var x1 = z[0]
                  var y1 = z[1]

                 console.log(x1);

                var slice =  mySvg.select(".slices")
                             .selectAll("path.slice")
                             .data(myPie(data)) // 
                             .enter()
                             .append("path")
                             .attr("class", "slice")
                             .attr("d", function(d)
                              {
                               return myArcMaker(d)
                              })
                             .attr("fill", function(d, i) {return colors(i);}) //using the d3 color brewer to color each arc
                             .attr("stroke", "white") //giving each arc a stroke of white

                                var dots = slice.select(".dots")
                                        .data(myPie(data))
                                        .enter()
                                        .append("circle")
                                        .attr("class", "dots")
                                        .attr("cx", x1)
                                        .attr("cy", y1)
                                        .attr("r", dRadius)
                                        .attr("fill", dFillColor)
                                        .attr("stroke", sColor)

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

当我运行代码时，这些点仅出现在饼图的中心，并且不会附加到每个各自弧的 x,y 值。关于如何迭代每个弧以附加点有什么想法吗？

json数据:

> [ {     "Fruits": "Oranges",   "value": 60 }, {     "Fruits":
> "Apples",   "value": 135 }, {     "Fruits": "Bananas",   "value": 225
> }, {     "Fruits": "Kiwis",   "value": 120 },   {     "Fruits":
> "Pears",   "value": 175 }, {     "Fruits": "Grapes",   "value": 145  }
> ]

最佳答案

如下所示设置点位置。

 var dots = slice.select(".dots")
          .data(myPie(data))
          .enter()
          .append("circle")
          .attr("transform", function(d) {                  
               return "translate(" + myArcMaker.centroid(d) + ")";
           })
           .attr("r", dRadius)
           .attr("fill", dFillColor)
           .attr("stroke", sColor);

并且您错过了 d3 饼图的 value 设置。

var myPie = d3.layout.pie()
  .sort(null)
  .startAngle(2 * (Math.PI))
  .endAngle(((Math.PI)) / 360)
  .value(function(d) {
    return d.value;
  });

工作 fiddle :

var data = [{
  "Fruits": "Oranges",
  "value": 60
}, {
  "Fruits": "Apples",
  "value": 135
}, {
  "Fruits": "Bananas",
  "value": 225
}, {
  "Fruits": "Kiwis",
  "value": 120
}, {
  "Fruits": "Pears",
  "value": 175
}, {
  "Fruits": "Grapes",
  "value": 145
}];

var oRadius = 300; //var holding value for the outer radius of the arc
var iRadius = 80; //var holding the value for the inner radius of the arc
var cRadius = 3; //var holding the value for the corner radius of the arc
var colors = d3.scale.category20b(); //built in D3 function to color pieces of data
var width = 1400; //setting the width of the svg
var height = 1000; //setting the height of the svg
var dRadius = 5; //setting the radius for the dots
var sColor = "white"; // color for the stroke of the arcs
var dStrokeColor = "#666";
var dFillColor = "#ccc"
var myChart;

var myArcMaker = d3.svg.arc().outerRadius(oRadius).innerRadius(iRadius);
var bigArcMaker = d3.svg.arc().outerRadius(200).innerRadius(oRadius);

var mySvg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr("height", height) 
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


mySvg.append("g")
  .attr("class", "slices");

mySvg.append("g")
  .attr("class", "dots");

mySvg.append("g")
  .attr("class", "lines");



var myPie = d3.layout.pie()
  .sort(null)
  .startAngle(2 * (Math.PI))
  .endAngle(((Math.PI)) / 360)
  .value(function(d) {
    return d.value;
  });


visual();


function visual() {
       var slice = mySvg.select(".slices")
      .selectAll("path.slice")
      .data(myPie(data)) // 
      .enter()
      .append("path")
      .attr("class", "slice")
      .attr("d", function(d) {
        return myArcMaker(d)
      })
      .attr("fill", function(d, i) {
        return colors(i);
      }) //using the d3 color brewer to color each arc
      .attr("stroke", "white") //giving each arc a stroke of white

    var dots = slice.select(".dots")
      .data(myPie(data))
      .enter()
      .append("circle")
      .attr("class", "dots")
      .attr("transform", function(d) {
        return "translate(" + myArcMaker.centroid(d) + ")";
      })

    .attr("r", dRadius)
      .attr("fill", dFillColor)
      .attr("stroke", sColor)

  }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}
svg {
  width: 100%;
  height: 100%;
}
path {
  stroke-width: 2px;
}
polyline {
  opacity: .3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - 获取 d3 中的质心坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35600095/

文章推荐： javascript - 下载 asp.net 后触发 javascript 函数

文章推荐： javascript - 删除自动发布后，模板将循环访问用户集合

文章推荐： javascript - 如何获取xml控件属性

使用python爬取微博数据打造一颗“心”
前言一年一度的虐狗节终于过去了，朋友圈各种晒，晒自拍，晒娃，晒美食，秀恩爱的。程序员在晒什么，程序员在加班。但是礼物还是少不了的，送什么好？作为程序员，我准备了一份特别的礼物，用以往发的微博数据
javascript - 呈现路线后，将 V3 Google map 置于 route 心
默认情况下，我有一个 V3 map 加载并以特定的经度/纬度为中心。加载后，用户可以输入他们的地址以获取前往该地点的路线。发生这种情况时， map 会调整大小以适应其左侧的方向框。因此，路线在 map

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 获取 d3 中的质心坐标