Dc.js 与行图上的 Bootstrap styles 冲突

Question

. Answers to this question are eligible for a +50 reputation bounty. anonymus_rex wants to to this question.

I'm building a dashboard using dc.js / d3.js / crossfilter / bootstrap but I'm stuck on building a row chart .

The problem is that all the rows of the chart are rendering with the same length, even when the group is being calculated correctly and their values are distincts (4/3/1) (you can check it doing groupB.all() on terminal).

The source of the problem, which I found out after multiple headaches, is that bootstrap's styles overrides rect tags width. See the pictures where the problem goes away unchecking the width attribute on the .row>* selector's class.

I couldn't solve this. I tried writing styles to override it using width: revert , width: auto , width: initial and even tried using jQuery to remove that attribute after render, but cannot get it to work. It seems that none of these methods are exactly the same than unchecking the attribute definition on Chrome inspector.

I can't change any library version due it is a large project and has other dashboards already built with this same stack.

Here is the jsfiddle with the exact same scenario.

Answer 1

I am afraid that a fix is only available in a recent version of the library.

If you can't update the version of the dc.js you are using, you could try removing the conflicting class and provide a different one.

For example, taking as reference your fiddle, please, try the following:

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();

// I copied and pasted the whole javascript fragment, but these lines
// are the only necessary

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

You probably still will need to tweak the chart styles, but at least they will have the right width.