dc.js - Rendering two objects (one chart - renders, one shape - doesn't) together in one group?

Question

I have two elements I need to render and a context of the big picture I am trying to achieve (a complete dashboard).

One is a chart that renders fine.

 $scope.riskChart = new dc.pieChart('#risk-chart');
 $scope.riskChart
       .width(width)
       .height(height)
       .radius(Math.round(height/2.0))
       .innerRadius(Math.round(height/4.0))
       .dimension($scope.quarter)
       .group($scope.quarterGroup)
       .transitionDuration(250);

The other is a triangle, to be used for a more complex shape

 $scope.openChart = d3.select("#risk-chart svg g")
        .enter()
        .attr("width", 55)
        .attr("height", 55)
        .append('path')
        .attr("d", d3.symbol('triangle-up'))
        .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })
        .style("fill", fill);

On invocation of render functions, the dc.js render function is recognized and the chart is seen, but the d3.js render() function is not recognized.

How do I add this shape to my dc.js canvas (an svg element).

 $scope.riskChart.render();   <--------------Works!
 $scope.openChart.render();   <--------------Doesn't work (d3.js)!

How do I make this work?

EDIT:

I modified dc.js to include my custom chart, it is a work in progress.

dc.starChart =  function(parent, fill) {
    var _chart = {};
    var _count = null, _category = null;
    var _width, _height;
    var _root = null, _svg = null, _g = null;
    var _region;
    var _minHeight = 20;
    var _dispatch = d3.dispatch('jump');

    _chart.count = function(count) {
        if(!arguments.length)
            return _count;
        _count = count;
        return _chart;
    };

    _chart.category = function(category) {
        if(!arguments.length)
            return _category
        _category = category;
        return _chart;
    };


function count() {
    return _count;
}

function category() {
    return _category;
}

function y(height) {
    return isNaN(height) ? 3 : _y(0) - _y(height);
}



_chart.redraw = function(fill) {
    var color = fill;  
    var triangle = d3.symbol('triangle-up');
    this._g.attr("width", 55)
        .attr("height", 55)
        .append('path')
        .attr("d", triangle)
        .attr("transform", function(d) { return "translate(" + 25 + "," + 25 + ")"; })
        .style("fill", fill);
    return _chart;

};     

_chart.render = function() {
    _g = _svg
        .append('g');

    _svg.on('click', function() {
        if(_x)
            _dispatch.jump(_x.invert(d3.mouse(this)[0]));
    });
    if (_root.select('svg'))
        _chart.redraw();
    else{
        resetSvg();                    
        generateSvg();
    }
    return _chart;
};

_chart.on = function(event, callback) {
    _dispatch.on(event, callback);
    return _chart;
};

_chart.width = function(w) {
    if(!arguments.length)
        return this._width;
    this._width = w;
    return _chart;
};

_chart.height = function(h) {
    if(!arguments.length)
        return this._height;
    this._height = h;
    return _chart;
};

_chart.select = function(s) {
    return this._root.select(s);
};

_chart.selectAll = function(s) {
    return this._root.selectAll(s);
};

function resetSvg() {
    if (_root.select('svg'))
        _chart.select('svg').remove();
    generateSvg();
}

function generateSvg() {
    this._svg = _root.append('svg')
        .attr({width: _chart.width(),
               height: _chart.height()});
}

_root = d3.select(parent);
return _chart;

}

Answer 1

Because the triangle is not bound to any data array, .enter() should not be called.

Try this way:

 $scope.openChart = d3.select("#risk-chart svg g")
        .attr("width", 55)
        .attr("height", 55)
        .append('path')
        .attr("d", d3.symbol('triangle-up'))
        .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })
        .style("fill", fill);

Answer 2

I think I confused matters by talking about how to create a new chart, when really you just want to add a symbol to an existing chart.

In order to add things to an existing chart, the easiest thing to do is put an event handler on its pretransition or renderlet event. The pretransition event fires immediately once a chart is rendered or redrawn; the renderlet event fires after its animated transitions are complete.

Adapting your code to D3v4/5 and sticking it in a pretransition handler might look like this:

yearRingChart.on('pretransition', chart => {
  let tri = chart.select('svg g') // 1
    .selectAll('path.triangle') // 2
    .data([0]); // 1
  tri = tri.enter()
    .append('path')
    .attr('class', 'triangle')
    .merge(tri);
  tri
    .attr("d", d3.symbol().type(d3.symbolTriangle).size(200))
    .style("fill", 'darkgreen'); // 5
})

Some notes:

1. Use chart.select to select items within the chart. It's no different from using D3 directly, but it's a little safer. We select the containing <g> here, which is where we want to add the triangle.
2. Whether or not the triangle is already there, select it.
3. .data([0]) is a trick to add an element once, only if it doesn't exist - any array of size 1 will do
4. If there is no triangle, append one and merge it into the selection. Now tri will contain exactly one old or new triangle.
5. Define any attributes on the triangle, here using d3.symbol to define a triangle of area 200.

Example fiddle.