Использование simplify.js с dc.js для упрощения строки

Question

Я пишу приложение Meteor, которое будет получать новые данные каждые 5 минут или около того, и добавлять новые данные в группу диаграмм. Я использую dc.js для создания диаграмм, потому что хочу, чтобы пользователи могли исследовать данные. Я хочу упростить строку, используя simplify.js, перед ее графикой.

Мне сложно определить, где путь вычисляется в библиотеке dc.js. Код может быть найден here В DC, линияChart inheirits from coordGridChart. coordinateGridChart имеет метод doRender() (начиная от линии 1408):

_chart.doRender = function() { 
    if (_x == null) 
     throw new dc.errors.InvalidStateException("Mandatory attribute chart.x is missing on chart[" 
      + _chart.anchor() + "]"); 

    _chart.resetSvg(); 

    if (_chart.dataSet()) { 
     _chart.generateG(); 

     generateClipPath(); 
     prepareXAxis(_chart.g()); 
     prepareYAxis(_chart.g()); 

     _chart.plotData(); 

     _chart.renderXAxis(_chart.g()); 
     _chart.renderYAxis(_chart.g()); 

     _chart.renderBrush(_chart.g()); 

     enableMouseZoom(); 
    } 

Так что метод plotData кажется, чтобы сделать работу. plotData определяется для Linechart на линии 2548:

_chart.plotData = function() { 
    var groups = _chart.allGroups(); 

    _chart.calculateDataPointMatrixForAll(groups); 

    for (var groupIndex = 0; groupIndex < groups.length; ++ groupIndex) { 
     var group = groups[groupIndex]; 
     plotDataByGroup(groupIndex, group); 
    } 
}; 

function plotDataByGroup(groupIndex, group) { 
    var stackedCssClass = getStackedCssClass(groupIndex); 

    var g = createGrouping(stackedCssClass, group); 

    var line = drawLine(g, stackedCssClass, groupIndex); 

    if (_renderArea) 
     drawArea(g, stackedCssClass, groupIndex, line); 

    if (_chart.renderTitle()) 
     drawDots(g, groupIndex); 
} 

function getStackedCssClass(groupIndex) { 
    return dc.constants.STACK_CLASS + groupIndex; 
} 

function createGrouping(stackedCssClass, group) { 
    var g = _chart.chartBodyG().select("g." + stackedCssClass); 

    if (g.empty()) 
     g = _chart.chartBodyG().append("g").attr("class", stackedCssClass); 

    g.datum(group.all()); 

    return g; 
} 

function drawLine(g, stackedCssClass, groupIndex) { 
    var linePath = g.select("path.line"); 

    if (linePath.empty()) 
     linePath = g.append("path") 
      .attr("class", "line " + stackedCssClass); 

    linePath[0][0][dc.constants.GROUP_INDEX_NAME] = groupIndex; 

    var line = d3.svg.line() 
     .x(lineX) 
     .y(function(d, dataIndex) { 
      var groupIndex = this[dc.constants.GROUP_INDEX_NAME]; 
      return lineY(d, dataIndex, groupIndex); 
     }); 

    dc.transition(linePath, _chart.transitionDuration(), 
     function(t) { 
      t.ease("linear"); 
     }).attr("d", line); 

    return line; 
} 

var lineX = function(d) { 
    return _chart.margins().left + _chart.x()(_chart.keyAccessor()(d)); 
}; 

var lineY = function(d, dataIndex, groupIndex) { 
    var y = _chart.getChartStack().getDataPoint(groupIndex, dataIndex); 
    if(y >= _chart.dataPointBaseline()) 
     y += _chart.dataPointHeight(d, groupIndex); 
    return y; 
}; 

Итак, это путь получения добавляемые где .attr("d", line) явится? Когда я console.logline, это группа функций. Атрибут «d» пути - это информация строки svg, поэтому это строка, которая выглядит как «M100,50L100,55, L101,75» и так далее. Я не могу найти, где эта строка строится в исходном коде. Я хочу вмешаться на этом шаге, чтобы упростить строку перед добавлением элемента пути в элемент svg.

Кто-нибудь достаточно знаком с dc.js, чтобы помочь мне? Заранее спасибо.

Answer 1

var line = d3.svg.line() 
     .x(lineX) 
     .y(function(d, dataIndex) { 
      var groupIndex = this[dc.constants.GROUP_INDEX_NAME]; 
      return lineY(d, dataIndex, groupIndex); 
     }); 

Путь линии генерируется стандартом d3. Хотя трудность использования simplify.js заключается в том, что генератор линии d3 генерирует только атрибут svg: path d вместо вектора точки, поэтому вам, вероятно, придется реализовать собственный генератор строк, чтобы в этом случае использовать simplify.js. Однако d3.svg.line генерирует точечный вектор как промежуточный