фиксированная ось x в DC js rowChart?

Question

С DC js, пытаясь установить rowChart с фиксированной осью X 0-100. Однако рисует ли он как одну линию?

Я поставил .elasticX (ложь) и выглядит, как и выше. Настройка на true делает ее правильной, но ось X является упругой, очевидно.

Версия 2.1.0-dev после изменения с 1.7.0, который дал тот же результат.

После JS выглядит следующим образом:

day_chart.width(180) 
    .height(180) 
    .margins({ top: 0, left: 10, right: 10, bottom: 20 }) 
    .dimension(dayOfWeek) 
    .group(dayOfWeekGroup) 
    .valueAccessor(function (d) { 
     return d.value.Percent; 
    }) 
    // assign colors to each value in the x scale domain 
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb']) 
    .label(function (d) { 
     return d.key.split('.')[1]; 
    }) 
    // title sets the row text 
    .title(function (d) { 
     return TooltipOcc(d.key.split('.')[1], d.value.Percent); 
    }) 
    .elasticX(false) 
    .x(d3.scale.linear().domain([0, 100])) 
    .xAxis().ticks(4) 
; 

HTML является основным DIV с идентификатором. диаграмма dc.css и Col-мкр-5 является bootstrap.css

<div id="day-chart" class="chart col-md-5"> 
    <div class="title">Day of Week</div> 
</div> 

Chrome инспектор показывает, что корневая пространство 180, по крайней мере, но что-то происходит внутри что-то отсутствует?

Надеюсь, это будет какая-то ошибка размещения, которую я сделал с помощью JS. Попробуйте что-нибудь типа размещения .x( в разных точках, удаляя .xAxis.

Спасибо за любую помощь.

Answer 1

Настройка домена вручную сделал трюк для меня (как на dc.js forum thread)

day_chart.x(d3.scale.linear().range([0,(day_chart.width()-50)]).domain([0,100])); 
day_chart.xAxis().scale(day_chart.x()); 

Answer 2

у меня такая же проблема с dc.js строк диаграммы.

• crossfilter данных обычно большой, поэтому прокрутки скрыть ось х
• Визуально ось находится вне фокуса, его трудно понять масштаб

решение

1. Создайте диаграмму строк dc.js с данными перекрестного фильтра

2.Draw внешняя ось x с помощью ссылки на диаграмму строк

// Dataset A 
    var datasetA = [{"Subject":"s1","Name":"A","Mark":"50"},{"Subject":"s2","Name":"B","Mark":"40"},{"Subject":"s3","Name":"C","Mark":"40"},{"Subject":"s4","Name":"A","Mark":"50"},{"Subject":"s5","Name":"B","Mark":"40"},{"Subject":"s6","Name":"C","Mark":"40"},{"Subject":"s7","Name":"A","Mark":"50"},{"Subject":"s8","Name":"B","Mark":"40"},{"Subject":"s9","Name":"C","Mark":"40"}]; 

    // Initialization of crossfilter for the datasetA 
    var CFA = crossfilter(datasetA); 
    // Creating the dimension 
    subject_DA = CFA.dimension(function(d){ return d.Subject; }); 
    // Creating the chart 
    subjectAChart = dc.rowChart("#subjectA"); 
    // Creating the group 
    subject_AG = subject_DA.group(); 
    // subject Chart 
    subjectAChart 
    .width(550).height(300) 
    .margins({top: 5, left: 10, right: 10, bottom: 0}) 
    .dimension(subject_DA) 
    .group(subject_AG) 
    .gap(2) 
    .title(function(d){ return d.key;}) 
    .label(function (d) { return d.key; }) 
    .elasticX(true) 
    .colors(d3.scale.category20b()) 
    .xAxis().ticks(4); 

    dc.renderAll(); 

    var margin = {top: 5, right: 0, bottom: 0, left: 0}, 
    width = 550 - margin.left - margin.right, 
    height = 35 - margin.top - margin.bottom; 

var svg = d3.select("#ExtAxis") 
    .append("svg:svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append('g') 
    .attr("transform", function(d, i) { 
     return "translate("+margin.left+","+margin.top+")"; 
    }); 
var xAxis = subjectAChart.xAxis() 
svg.append("g") 
    .attr("class", "extnl-axis") 
    .attr("transform", "translate(10," + margin.bottom + ")") 
    .call(xAxis) 
return xAxis; 

Working Example