Question

我需要绘制气泡图，其中每个气泡都是d3版本3中的下图中的圆环图。我能够实现某些目标，但不了解如何水平分布圆圈，因为我的小部件将是矩形的。

另外，如下图所示制作甜甜圈泡泡。任何帮助，将不胜感激。感谢。

码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

<script type="text/javascript">
  var dataset = [
    { "Name": "Olives",          "Count": 4319, "Category": "d" },
    { "Name": "Tea",             "Count": 4159, "Category": "d" },
    { "Name": "Boiled Potatoes", "Count": 2074, "Category": "a" },
    { "Name": "Milk",            "Count": 1894, "Category": "a" },
    { "Name": "Chicken Salad",   "Count": 1809, "Category": "a" },
    { "Name": "Lettuce Salad",   "Count": 1566, "Category": "a" },
    { "Name": "Lobster Salad",   "Count": 1511, "Category": "a" },
    { "Name": "Chocolate",       "Count": 1489, "Category": "b" }
  ];

  var width = 300, diameter = 300;
  var columnForText = 'Name',
  columnForColors = 'Category', 
  columnForRadius = "Count";
</script>

<?php
    // Supply a user id and an access token
    $clientid = "my client id";
    $accessToken = "my client secret";

    // Gets our data
    function fetchData($url){
         $ch = curl_init();
         curl_setopt($ch, CURLOPT_URL, $url);
         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
         curl_setopt($ch, CURLOPT_TIMEOUT, 20);
         $result = curl_exec($ch);
         curl_close($ch); 
         return $result;
    }

    // Pulls and parses data.
    $result = fetchData("https://api.instagram.com/v1/users/{$clientid}/media/recent/?access_token={$accessToken}");
    $result = json_decode($result);
?>



    <?php foreach ($result->data as $post): ?>
        <!-- Renders images. @Options (thumbnail,low_resoulution, high_resolution) -->
        <a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
    <?php endforeach ?>

Answer 1

这是我的小提琴：http://jsfiddle.net/71s86zL7/

我创建了一个复合气泡饼图，并在饼图中指定了内半径。

var arc = d3.svg.arc()
  .innerRadius(radius)
  .outerRadius(radius);

.attr("d", function(d) {
    arc.innerRadius(d.r+5);
    arc.outerRadius(d.r);
    return arc(d);
})

如果有任何替代解决方案，请告诉我。

D3.js版本3中的甜甜圈泡泡图

1 个答案: