Я бы сказал, что это больше проблема того, как вы моделируете свои данные. Вместо использования строковых массивов для адресов было бы намного проще и проще сделать что-то вроде этого:
Создайте класс для представления ваших адресов, например:
public class Address
{
public string Address1 { get; set; }
public string CityName { get; set; }
public string StateCode { get; set; }
public string ZipCode { get; set; }
}
Тогда в вашей модели просмотра вы можете заполнить эти адреса следующим образом:
public class ViewModel
{
public IList<Address> Addresses = new List<Address>();
public void PopulateAddresses()
{
foreach(DataRow row in AddressTable.Rows)
{
Address address = new Address
{
Address1 = row["Address1"].ToString(),
CityName = row["CityName"].ToString(),
StateCode = row["StateCode"].ToString(),
ZipCode = row["ZipCode"].ToString()
};
Addresses.Add(address);
}
lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(Addresses);
}
}
Что даст вам JSON, который выглядит так:
[{"Address1" : "123 Easy Street", "CityName": "New York", "StateCode": "NY", "ZipCode": "12345"}]
Если я правильно понимаю ваш вопрос, то вы пытаетесь нарисовать дополнительную вертикальную линию от черных точек до меток непосредственно над ними, например:
Чтобы добиться этого, вы можете вызвать $svg.line()
в функции drawEvent
вашего Timeline
прототипа следующими параметрами и конфигурацией:
var newLine = $svg.line(
x, // Horizontal offset of the line being drawn
this.height, // Height is the vertical height of timeline
x, // Re-use "x" to achieve vertical line
this.height - 30) // 30 represents the height of newLine
.attr("stroke", "#000000")
.attr("stroke-width", 1)
.appendTo(group); // Adds this newLine to the current svg group
Для рабочего пример, см. это: https://jsfiddle.net/ygqw2a9j/