Question

我使用d3在svg中绘制了一个rect，并且只想在左侧和右侧划动。

<rect class="extent" x="578" width="356" height="250"
      style="cursor: move; opacity: 0.2; fill: #FF9000;" ></rect>

Answer 1

这是另一个黑客攻击，但是你可以在你的形状上添加一个过滤器并按行程宽度剪切顶部和底部 - 这里我假设是1个单位。

<defs>
   <filter id="clippy" x="0" y="1" height="248" width="356">
     <feColorMatrix type="identity"/>
   </filter>
</defs>
<rect filter="url(#clippy)" class="extent" width="356" height="250"
      style="cursor: move;opacity: 0.2; fill: #FF9000;" x="578"></rect>

<强>更新

以下是克里斯托弗·切赫创作的答案的d3.js版本（见原文缩写）：

svg.append("defs").append("filter")
    .attr("id", "clippy")
    .attr("x", "0")
    .attr("y", "1")
    .attr("height", "248")
    .attr("width" "356")
    .append("feColorMatrix")
    .attr("type", "identity")

svg.append("rect")
    .attr("filter", "url(#clippy)")
    .attr("class", "extent") 
    .attr("style", "cursor:move; opacity:0.2; fill: #FF9000")
    .attr("x", "578")
    .attr("height", "250")
    .attr("width" "356")

Answer 2

以下是Michael Mullany发布的答案的d3.js版本。如果你想接受我的回答，请接受他的回答。我只是做了一个有趣的练习：

svg.append("defs").append("filter")
    .attr("id", "clippy")
    .attr("x", "0")
    .attr("y", "1")
    .attr("height", "248")
    .attr("width" "356")
    .append("feColorMatrix")
    .attr("type", "identity")

svg.append("rect")
    .attr("filter", "url(#clippy)")
    .attr("class", "extent") 
    .attr("style", "cursor:move; opacity:0.2; fill: #FF9000")
    .attr("x", "578")
    .attr("height", "250")
    .attr("width" "356")

Answer 3

你似乎无法做到这一点。

您可能需要在两侧绘制一条线并从rect的当前宽度中减去这些线宽。

Answer 4

我的例子是使用d3.js和画笔工具。

# Brush object
brush.x(core.xScale()).on("brush", onBrush)         

# Call the brush object
container.call(brush).selectAll("rect").attr("height", core.height())

# Method on brush
onBrush = () ->
  extent = brush.extent()
  extent = if brush.empty() then core.xScale().domain() else extent

无论如何，作为画笔工具的一部分，将2个矩形添加为画笔的左右边界。你可以简单地使用css选择它们并重新设置它们。这就是我最终做的事情，这是我在.less

中的解决方案

.resize {
    rect { 
        visibility: visible !important;
        fill: #444444;
    }
}

中风svg左右两侧

4 个答案: