2015-09-13 2 views
-1

Я хочу добавить простую область к моей диаграмме с конечными точками значений площади в качестве констант.d3 append simple area

percentArea = d3.svg.area() 
     .interpolate('linear') 
     .x0(0) 
     .x1(w) 
     .y0(h/4) 
     .y1(h); 

Я хочу добавить эту область непосредственно и дать ей заливку цвета. Спасибо за помощь. У меня особенно тяжело, пытаясь заполнить область. На диаграмме показана линия над областью, но я не пытаюсь заполнить ее.

Редакция: Попытка сделать вопрос более понятным и конкретным: проблема, с которой я сталкиваюсь, - это только когда я пытаюсь вызвать свою функцию без передачи данных. Заполнение области работает, как ожидается, когда я вызываю проценты (данные). Однако я не могу понять, почему я должен передавать данные, когда конечные точки моей области являются постоянными.

+0

Я не хочу называть это как percentArea (data), поскольку конечные точки фиксированы, поэтому данные передачи кажутся неправильными. – hunters30

+0

'.style (« fill », color)' –

+0

Да, спасибо, что работает, когда я использовал append («путь»). Attr («d», percentArea (data)) .style («fill», color). Любое предложение, пожалуйста, чтобы улучшить способ, которым я это называю? Или это единственный способ, даже если конечные точки постоянны? – hunters30

ответ

0

Вам необходимо убедиться, что путь, который вы предоставили, заполняется. Есть два способа сделать это:

установить стиль

path.style("fill", "steelblue"); 

установить класс и использовать CSS

path.attr("class", "filled-area"); 

// In CSS 
.filled-area { 
    fill: steelblue; 
} 

Вот краткий пример:

Диаграмма района с инсультом:

Area Chart with a Stroke

Area Chart без заливки

Как вы можете видеть, по умолчанию используется черный

Area Chart with no fill

Площадь Диаграмма с правильной заливки

Area Chart with correct fill

+0

Мой вопрос был слегка неверно истолкован. Однако вы так ответили так спасибо. У меня проблема с заполнением области, когда я пытаюсь добавить область в svg, не передавая ей никаких данных. Способ, который вы предлагаете, работает, когда я вызываю свою функцию области как percentArea (данные). Однако я не понимаю, почему я должен передавать данные, даже когда мои конечные точки являются постоянными. – hunters30

+0

@ hunters30: Расскажите, что - задайте другой вопрос с примером, который я могу запустить (поместите ссылку в качестве комментария в этот вопрос), и я посмотрю. – Ian

+0

Ок сделал новый вопрос и попытался быть более конкретным. Также добавьте скрипт, чтобы показать мою проблему. [Ссылка] (http://stackoverflow.com/questions/32572800/d3-append-a-svg-with-constant-area) – hunters30

Смежные вопросы