Skok w lewo i w prawą stronę prostokąta svg

Question

Narysowałem prostokąta w svg przy użyciu d3 i chciałbym obrys tylko lewej i prawej strony.

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

Answer 1

To kolejny hack, ale możesz dodać filtr do kształtu i przyciąć górny i dolny przez swoją strokewidth - co tutaj zakładam, to 1 jednostka.

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

Aktualizacja:

Oto wersja d3.js z odpowiedzią stworzony przez Christophera Chiche (patrz niżej oryginalna):

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

Nie możesz tego zrobić.

Prawdopodobnie musisz narysować linię po obu stronach i odjąć te szerokości linii od bieżącej szerokości prostokąta.

Answer 3

Oto wersja z d3.js odpowiedź wysłana przez Michaela Mullany. Jeśli myślisz o zaakceptowaniu mojej odpowiedzi, proszę, zaakceptuj jego. Po prostu zrobiłem to, aby się dobrze bawić:

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 4

Mój przykład był przy użyciu d3.js i narzędzia pędzla.

# 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 

W każdym razie, jako część narzędzia pędzla, 2 prostokąty są dodawane jako lewy i prawy obwód do pędzla. Możesz po prostu wybrać te przy użyciu css i zmienić je. To, co skończyło się robi i tu jest moje rozwiązanie w .less

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