相关疑难解决方法(0)

已经实现了SVG规范(Firefox等)部分的浏览器免费为我们进行了测试 - 如果我在SVG对象上附加了一个mousedown监听器,我会在点击形状时收到通知.这太棒了,特别是对于复杂的多边形形状.

我想知道是否有一种方法可以利用这个功能进行更多点击测试.我想知道给定的矩形是否与我的任何SVG形状相交.

例如,我向我的元素添加了3个复杂多边形.现在我想知道矩形(40,40,100,100)是否与它们中的任何一个相交.有没有人知道我怎么可能挂钩已经很好的命中测试支持,而不是自己添加所有这些代码？

谢谢

我一直在谷歌搜索,但我似乎无法掌握这一点.

我的情况是,在饼图上显示时各国重叠:

这是正在发生的事情的一个例子:

的jsfiddle

我是一个初学者D3,我正在努力防止文本重叠.有没有像我可以添加的文本边距属性,以便我的标签不会相互重叠？

所以我知道这个答案就是隐藏不适合图表的文字:如果有足够的空间,D3会将圆弧标签放在饼图中

但我无法弄清楚如何将其引入下面的代码中.我已编辑此代码以使其在查看时仅看到第二个内圈.但即使这样,许多标签也没有足够的空间来适应各自的切片.所以我想添加更多逻辑,只是为了检查文本是否适合.

或者甚至更简单的是,如果切片不占据整个圆圈的至少10%的分区,则隐藏它.

这是JS小提琴:

http://jsfiddle.net/P79kX/ 这不是一个完美的JSFiddle,它并不完全反映我的代码.但概念是一样的,检查边界框.

这是代码:

var width = 840,
    height = width,
    radius = width / 2,
    x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
    padding = 5,
    duration = 1000;

var div = d3.select("#chart_render");

div.select("img").remove();

var vis = div.append("svg")
    .attr("width", width + padding * 2)
    .attr("height", height + padding * 2)
  .append("g")
    .attr("transform", "translate(" + [radius + padding, radius + padding] + ")");

var partition = d3.layout.partition()
    .sort(null)
    .value(function(d) { return d.size }); …

我在D3中绘制一个饼图,但是文本剪辑本身有问题:

这是我的绘图功能:

    pie: function(config)
    {
        var width = config.width || 840,
            height = config.height || 520,
            radius = Math.min(width, height) / 2;

        var color = this._color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
        var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0);
        var pie = d3.layout.pie().sort(null).value(function(d) { return d.value; });

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

          var g = svg.selectAll(".arc").data(pie(config.data)).enter().append("g").attr("class", "arc");
          g.append("path").attr("d", arc).style("fill", function(d) { …