d3 function inside my attribute function (.attr(“d”, … statement) breaks code (D3 Version 5 - Scatterplot )

Question

I'm working with d3 version 5 to create a scatterplot.

The following code works smoothly.

 svg.selectAll(".point") .data(data) .enter().append("path") .attr("class", "point") .attr("d", d3.symbol().type(d3.symbolCross)) .attr("Fill",'steelblue') .attr("transform", function(d) {return "translate("+ x(dx) + "," + y(dy) + ")"; }) }); 

But when I use d inside any function, it breaks the display. Even if I use almost the simplest function possible.

 svg.selectAll(".point") .data(data) .enter().append("path") .attr("class", "point") .attr("d", function(d) { return "d3.symbol().type(d3.symbolCross)";} .attr("Fill",'steelblue') .attr("transform", function(d) { return "translate(" + x(dx) + "," + y(dy) + ")"; }) }); 

Answer 1

Actually, the error is not because of using d. The issue is all about not closing the function properly. Make sure you are opening and closing curly braces properly. Please try this.

svg.selectAll(".point")
            .data(data)
            .enter().append("path")
            .attr("class", "point")
            .attr("d", d3.symbol().type(d3.symbolCross))       
            .attr("Fill",'steelblue')
            .attr("transform", (d) => "translate(" + d.x + "," + d.y + ")");