笔画左右笔画

Question

我已经使用d3在svg中绘制了一个矩形，并且只想抚摸左侧和右侧。

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

Answer 1

这是另一种技巧，但是您可以在形状中添加过滤器，并通过strokewidth修剪顶部和底部-在这里我假设这是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>

更新：

这是Christopher Chiche创建的答案的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

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

中的解决方案

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

Answer 5

[Codepen]（https://codepen.io/shaswatatripathy/pen/oNgPpyd）

HTML

    <rect x="0.5" y="0.5" width="50" height="50" class="topBottom"/>


    <rect x="70.5" y="0.5" width="50" height="50" class="left"/>
    <rect x="140.5" y="0.5" width="50" height="50" class="topRight"/>
    <rect x="200.5" y="0.5" width="50" height="50" class="top"/>
  <rect x="260.5" y="0.5" width="50" height="50" class="bottomLeft"/>
  <rect x="320.5" y="0.5" width="50" height="50" class="bottomRight"/>

  <rect x="380.5" y="0.5" width="50" height="50" class="topLeft"/>

   <rect x="440.5" y="0.5" width="50" height="50" class="right"/>
  <rect x="500.5" y="0.5" width="50" height="50" class="bottom"/>

  <rect x="560.5" y="0.5" width="50" height="50" class="leftRight"/>

</svg>

CSS

rect { fill: none; stroke: black; }
.topBottom { stroke-dasharray: 50 }
.leftRight { stroke-dasharray: 0,50,50,0 }

.bottomLeft { stroke-dasharray: 0,100,150 }
.bottomRight { stroke-dasharray: 0,50,50 }
.topRight { stroke-dasharray: 100 }
.topLeft { stroke-dasharray: 50,100 }

.left { stroke-dasharray: 0,150,50 }
.top { stroke-dasharray: 50,150 }
.bottom { stroke-dasharray: 0,100,50,100 }
.right { stroke-dasharray: 0,50, 50,50 }