Geek asks and answers

Left and right side rect svg move

I created a rectangle in svg using d3 and would like to stroke only the left and right sides.

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

This is another hack, but you can add a filter to your form and pin the top and bottom line widths, which here I assume is 1 unit.

<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>

Update:

Here is the version of d3.js answer created by Christopher Chiche (see the original below):

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")
+4
source

Here is the version of the answer d3.jsposted by Michael Mullani. If you are thinking of accepting my answer, accept it instead. I just did it as an exercise to have fun:

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")
+4
source

.

, , .

+1

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

In any case, as part of the brush tool, two rectangles are added as the left and right borders of the brush. You can simply select them with css and restore them. This is what I finished and here is my solution in .less

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

More articles:


All Articles