Edit in JSFiddle

var width = 500,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("x", 100)
    .attr("y", 30)
    .attr("width", 100)
    .attr("height", 100)
    .attr("class", "normal")
    .attr("id", "rect");

var buttonA = svg.append("g")
    .attr("transform", "translate(" + 0 + "," + 200 + ")")
.on("click", function(){
    $("#rect").addClass("selected");
});

buttonA.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 100)
    .attr("height", 50)
    .attr("opacity", 0.8)
    .attr("stroke", "black")
    .attr("fill", "white")

buttonA.append("text")
    .attr("x", 50)
    .attr("y", 30)
    .attr("text-anchor", "middle")
    .style("font-size", "14pt")
    .text("addClass");

var buttonB = svg.append("g")
    .attr("transform", "translate(" + 200 + "," + 200 + ")")
.on("click", function(){
    $("#rect").attr("class", "selected");
});

buttonB.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 100)
    .attr("height", 50)
    .attr("opacity", 0.8)
    .attr("stroke", "black")
    .attr("fill", "white")

buttonB.append("text")
    .attr("x", 50)
    .attr("y", 30)
    .attr("text-anchor", "middle")
    .style("font-size", "14pt")
    .text("attr");

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

.normal{
    fill:red;
}

.selected{
    fill:blue !important;
}