dc.js pieChart set specific x axis value

Question

I am working on dc.js, i have draw pieChart

pieChart.width(300)
    .height(200)
    .transitionDuration(1500)
    .dimension(startValue)
    .group(startValueGroup, "StartValue")
    .radius(100)
    .minAngleForLabel(0.5)
    .legend(dc.legend().x(230).y(0))
    .title(function(d) {
        return d.key + ": " + d.value;
    })
    .renderTitle(true)
    .on("filtered", function (chart) {
        dc.events.trigger(function () {
            //console.log(total_payment);
            });
    });

Now, I want to set specific x axis value. Currently, pieChart taking center position of define width and height. That mean it's taking position of (150,100). I want to change this position to (100, 100).

How can i change position of x axis as per above code?

Answer 1

You can't set this directly in the dc options, but you can modify these values after the chart has been rendered. Assuming that "pie" is the ID of the DOM element that you rendered the pie chart into, you can do

d3.select("#pie > svg > g").attr("transform", "translate(100,100)");

Answer 2

I know it is an old post and that the answer works perfectly but when the chart is part of a bigger system (several charts) I found easier to add the above command directly to the chart by doing this:

pieChart.on('renderlet', function (chart) {
    chart.select("svg > g").attr("transform", "translate("100,100)");
});

Edit:

Actually I just found out you can do:

.cx(100)
.cy(100)

which will set the centre of the pie chart to 100, 100 before render.