score:2

Accepted answer

You aren't giving the node any attributes. I take it you want a circle and not a rect :

 var node = svgcontainer.selectAll('.node')
                      .data(nodes)
                      .enter().append('circle')
                      .attr('class', 'node')
                      .attr('x', function(d){ console.log(d); return d.x})
                      .attr('y', function(d){ return d.y})
                      .attr('r', 10)
                      .attr('transform', function(d){
                      return 'translate(' + d.x + ', ' + d.y + ')'
                      })

Notice the translate at the bottom. If you are using the force layout in D3, the tick function should take care of this, but it looks like you don't have one, so you have to insert it after you create the nodes.

If you didn't want circles and wanted rectangles then this should do :

 var nodeRect = svgcontainer.selectAll('.nodeRect')
                      .data(nodes)
                      .enter().append('rect')
                      .attr('class', 'nodeRect')
                      .attr('x', function(d){ console.log(d); return d.x})
                      .attr('y', function(d){ return d.y})
                      .attr('width', 100)
                       .attr('height', 50)
                      .attr('transform', function(d){
                      return 'translate(' + d.x + ', ' + d.y + ')'
                      })

Working fiddle with both : https://jsfiddle.net/reko91/n13kqvw9/

        var width = 500,
            height = 500;


        var nodes = [
     { x: width / 3, y: height / 2 }
     //{ x: 2 * width / 3, y: height / 1 },
     //{ x: 3 * width / 3, y: height / 2 },
     //{ x: 4 * width / 3, y: height / 2 }
        ];



        var force = d3.layout.force()
                     .size([width, height])
                     .nodes(nodes)



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


        var rectdata = [{ "x": 50, "y": 70, "width": 600, "height": 150,"rx":80,"ry":80,"fill":"skyblue"},
                       { "x": 50, "y": 260, "width": 200, "height": 400, "rx": 80, "ry": 90, "fill": "palegreen" },
                       { "x": 440, "y": 260, "width": 200, "height": 400, "rx": 80, "ry": 90, "fill": "orange" },
                       { "x": 50, "y": 700, "width": 600, "height": 150, "rx": 80, "ry": 80, "fill": "brown" }];


        var svgrect = svgcontainer.selectAll("rect").data(rectdata).enter().append("rect");



        var node = svgcontainer.selectAll('.node')
                      .data(nodes)
                      .enter().append('circle')
                      .attr('class', 'node')
                      .attr('x', function(d){ console.log(d); return d.x})
                      .attr('y', function(d){ return d.y})
                      .attr('r', 10)
                      .attr('transform', function(d){
                      return 'translate(' + d.x + ', ' + d.y + ')'
                      })
                      
        var nodeRect = svgcontainer.selectAll('.nodeRect')
                      .data(nodes)
                      .enter().append('rect')
                      .attr('class', 'nodeRect')
                      .attr('x', function(d){ console.log(d); return d.x})
                      .attr('y', function(d){ return d.y})
                      .attr('width', 100)
                       .attr('height', 50)
                      .attr('transform', function(d){
                      return 'translate(' + d.x + ', ' + d.y + ')'
                      })

        force.on('end', function () {

            svgrect.attr("x", function (d, i) { return d.x; })
                   .attr("y", function (d, i) { return d.y; })
                   .attr("rx", function (d, i) { return d.rx; })
                   .attr("ry", function (d, i) { return d.ry; })
                   .attr("width", function (d, i) { return d.width; })
                   .attr("height", function (d, i) { return d.height; })
                   .attr("fill", function (d, i) { return d.fill; });


        });


        force.start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query