Dc.js конфликтует со стилями Bootstrap на диаграмме строк

Боюсь, что обходной путь доступен только в последней версии библиотеки.

Если вы не можете обновить версию используемой вами библиотеки dc.js, вы можете попробовать удалить конфликтующий класс и предоставить вместо него другой.

Например, взяв за основу вашу скрипку, попробуйте следующее:

const data = [
    {author: "email1", otherField: "asd1"},
    {author: "email1", otherField: "asd2"},
  {author: "email2", otherField: "asd3"},
  {author: "email1", otherField: "asd4"},
  {author: "email3", otherField: "asd5"},
  {author: "email3", otherField: "asd6"},
  {author: "email3", otherField: "asd7"},
  {author: "email3", otherField: "asd8"},
]
var ndx = crossfilter(data)

var dimAuthor = ndx.dimension(function(d){ return d.author })
var groupB = dimAuthor.group().reduceCount()

var chartB = new dc.RowChart("#chart-b");

chartB
    .height(500)
  .width(600)
  .margins({top: 20, right: 50, bottom: 10, left: 45})
  .dimension(dimAuthor)
  .group(groupB)
  .label(function (d){
    return `${d.key} (${d.value})`;
  })
  .ordering(function(d){ return -d.value; })
  .x(d3.scaleLinear().domain([6,500]))
  .xAxis(d3.axisTop())
  .elasticX(true)

dc.renderAll();

// Remove the 'row' class and use for example 'dc-row' instead

d3.selectAll(".dc-chart  g.row")
  .classed("row", false)
  .classed("dc-row", true);

Как вы могли заметить, я скопировал и вставил вам весь фрагмент javascript. опубликовано, но нужны только эти строки:

d3.selectAll(".dc-chart  g.row")
  .classed("row", false)
  .classed("dc-row", true);

Возможно, вам все равно придется настроить стили диаграммы, но, по крайней мере, они будут иметь правильную ширину. Например, рассмотрите возможность включения следующего:

.dc-chart g.dc-row rect {
    fill-opacity: .8;
    cursor: pointer;
}