Question

我是d3 v3的初学者。我创建了多个甜甜圈图。当我将鼠标移到某个切片上时，会出现显示的工具提示。但我也希望切片能有所增长。

我已经尝试了一些代码，但我无法到达那里。我想知道问题是否可能与d3小费有关

这是我的js文件：

    //Source : http://bl.ocks.org/mbostock/1305337

var m = 15,
    r = 80,
    z = d3.scale.ordinal()
        .range(["#50FFC5", "#54E868", "#54CCE8", "#6395FF"]);


var pie = d3.layout.pie()
    .value(function (d) {
        return +d.count;
    })
    .sort(function (a, b) {
        return b.count - a.count;
    });

var arc = d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r);


var radius = d3.scale.linear()
    .range([10, r])
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .html(function (d) {
        return d.data.genre + ": " + d.data.count;
    })
    .direction('s');

d3.csv（“ ../ CSV / genreHameau.csv”，函数（错误，hameau）{ 如果（错误）抛出错误；

var datas = d3.nest()
    .key(function (d) {
        return d.origine;
    })
    .entries(hameau);


datas.forEach(function (d) {
    totalOrigin = d3.sum(d.values, function (d) {
        return +d.count;
    })
    d.values.forEach(function (dd) {
        dd.totalOrigin = totalOrigin
    })
})

datas.sort(function (a, b) {
    return d3.descending(a.values[0].totalOrigin, b.values[0].totalOrigin)
})

// définir le radius / rayon des arcs (rendre fonction de 'count')
var max = d3.max(datas, function (d) {
    return d.values[0].totalOrigin
})
var min = d3.min(datas, function (d) {
    return d.values[0].totalOrigin
})
radius.domain([min, max])


arc
    .innerRadius(function (d) {
        return radius(d.data.totalOrigin) / 2
    })
    .outerRadius(function (d) {
        return radius(d.data.totalOrigin)
    })


function size(d) {
    return radius(d.values[0].totalOrigin) + m
}

var div = d3.select("body").selectAll("div")
    .data(datas)
    .enter().append("div") // http://code.google.com/p/chromium/issues/detail?id=98951
    .style("display", "inline-block")
    .style("width", function (d) {
        return 2 * size(d) + "px"
    })
    .style("height", function (d) {
        return 2 * size(d) + "px"
    })
    .style("min-width", "80px")
    .style("min-height", "80px")

div.append("span")
    .attr("class", "nomhameau")
    .text(function (d) {
        return d.key;
    })
    .append("span")
    .attr("class", "nombrehameau")
    .text(function (d) {
        return " (" + d.values[0].totalOrigin + ")"
    });


var svg = div.append("svg")
//.attr("width", (r + m) * 2)
//.attr("height", (r + m) * 2)
    .attr("width", function (d) {
        return 2 * size(d)
    })
    .attr("height", function (d) {
        return 2 * size(d)
    })
    .append("g")
    .attr("transform", function (d) {
        return "translate (" + size(d) + "," + size(d) + ")"
    });

svg.call(tip);
var g = svg.selectAll("g")
    .data(function (d) {
        return pie(d.values);
    })
    .enter().append("g")
    .on("mouseover", tip.show)
    .on("mouseout", tip.hide)


g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        return z(d.data.genre);
    })
    .append("title")

}）;

谢谢您的帮助

Answer 1

我会这样：

就像您创建arc一样，创建一个半径较大的新半径，该半径可以是内部，外部或两者均是，

var arcHighlight = d3.svg.arc()
  .innerRadius(r / 2)
  .outerRadius(r*1.1);

然后，您将mouseover和mouseout事件添加到切片，并通过以下方式修改切片：

// Add a colored arc path, with a mouseover title showing the count.
g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return z(d.data.carrier); })


// new code
  .on('mouseover', function(d) {
    d3.select(this)
      .transition()
      .attr('d', arcHighlight(d));
  })
  .on('mouseout', function(d) {
    d3.select(this)
      .transition()
      .attr('d', arc(d));
  })
  .append("title")
    .text(function(d) { return d.data.carrier + ": " + d.data.count; });

transition是可选的，但看起来更漂亮；）

如何突出显示多个甜甜圈图D3的一部分

1 个答案: